자바스크립트 활용 실습
- Test030
- 라디오버튼 + 체크박스버튼
- this : 객체 넘겨주기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test030.html</title>
<style type="text/css">
div{text-align: center;}
</style>
<script type="text/javascript">
// 두 함수 모두에서 접근이 가능해야하기 때문에 -> 전역변수 선언 및 초기화
var cnt = 0; //-- 선택 가능한 아이스크림의 갯수
var userCnt = 0; //-- 사용자가 선택 가능한 아이스크림의 갯수
//각각의 라디오 버튼이 건드려졌을 때 호출되는 함수
//→ 선택 가능한 아이스크림의 갯수 세팅
function countSet(val)
{
//확인
//alert("함수 countSet");
//alert("val :" + val);
// 매개변수로 넘겨받은 데이터를 이용하여
// 선택가능한 아이스크림의 갯수 설정
cnt = parseInt(val);
alert("당신이 선택할 수 있는 아이스크림 갯수는 『 " + cnt + "』개 입니다." );
}
//체크 박스가 건드려졌을 때 호출되는 함수
//→ 선택한 아이스크림의 갯수 증가 및 감소
function actionChoice(obj)
{
// 확인 -- 체크박스 선택시, 해제시 둘다 알림창 확인 됨
// alert("함수 actionChoice");
// alert(obj); //--==>> [object HTMLInputElement]
// 확인
// alert("체크되어있는지의 여부");
// alert(obj.checked);
//-- 체크 설정되며 클릭된 상황 vs 체크 해제되며 클릭된 상황 판단 가능
//--==>> true(클릭 액션에 의해 체크되었을 때) / false(클릭 액션에 의해 체크 해제할 때)
if (obj.checked)
{
//alert("체크~");
// 선택값을 증가시키기 전에, 선택 가능한 상황인지 먼저 확인(선택 갯수)
if (userCnt >= cnt)
{
alert("선택할 수 있는 갯수를 초과하였습니다."); // 1. 이 부분까지 처리하면 초과는 했느데 체크 처리가 됨
obj.checked = false; // 3. 즉, 체크 된 옵션도 false 로 해제 시켜주어야 한다.
return; // 함수 종료시켜버림 // 2. 이 부분까지 처리하면 초과시 카운트는 늘지 않지만 체크박스는 클릭이 된다
}
userCnt++; // 체크되었을 때, 사용자가 선택한 갯수 증가
}
else
{
//alert("체크 해제~");
userCnt--; // 체크 해제 되었을 때, 사용자가 선택한 갯수 감소
}
// 확인
alert("선택 가능한 " + cnt + "개 중 " + userCnt + " 선택");
}
</script>
</head>
<body>
<div>
<h1>자바스크립트 활용</h1>
<hr>
</div>
<div>
<h2>아이스크림 주문</h2>
<form>
--- 사이즈 선택 --- <br><br>
<!-- name 은 하나만 클릭되어야 할 라디오 버튼들을 동일하게 구성 -->
<!-- value 의 경우 갯수 선택 제한 할 값으로 구성해두면 편하게 제어 가능
이 경우, this로 넘겨주든 value 값을 직접 넘겨주든 동일한 구성이 된다.-->
<!-- label 설정을 해야 이름을 클릭해도 선택이 된다. -->
<input type="radio" id="a1" value="1" name="radioGroup" onclick="countSet(1);"> <label for="a1">싱글(1)</label>
<input type="radio" id="b1" value="2" name="radioGroup" onclick="countSet(2);"> <label for="b1">더블(2)</label>
<input type="radio" id="c1" value="3" name="radioGroup" onclick="countSet(3);"> <label for="c1">파인트(3)</label>
<input type="radio" id="d1" value="4" name="radioGroup" onclick="countSet(4);"> <label for="d1">쿼터(4)</label>
<input type="radio" id="e1" value="5" name="radioGroup" onclick="countSet(5);"> <label for="e1">패밀리(5)</label>
<input type="radio" id="f1" value="6" name="radioGroup" onclick="countSet(6);"> <label for="f1">하프갤런(6)</label>
<br><br>
--- 종류 선택 --- <br><br>
<!-- name 은 갯수 제한이 되어야 할 동질의 성격을 띄는 체크박스들을 동일하게 구성 -->
<!-- value 의 경우 이름을 확인하는 것을 넘어, 해당 체크박스를 제어해야하기 때문에 단순 텍스트로 넘기는 것이 아닌
this 로 해당 객체를 넘기는 구성을 취한다-->
<!-- <input type="checkbox" name="checkGroup" id="a2" value="엄마" onclick="actionChoice('엄마')"> <label for="a2">엄마는외계인</label>
-----------------------(문자열을 넘기는 형태 확인)
자바스크립트에서는 두가지를 혼용해서 사용할 수 있다.
따라서 onclick='actionChoice("엄마")' onclick="actionChoice(\"엄마\")" 이러한 형태도 가능하다.-->
<input type="checkbox" name="checkGroup" id="a2" value="엄마" onclick="actionChoice(this)"> <label for="a2">엄마는외계인</label>
<input type="checkbox" name="checkGroup" id="b2" value="레인" onclick="actionChoice(this)"> <label for="b2">레인보우샤베트</label>
<input type="checkbox" name="checkGroup" id="c2" value="뉴욕" onclick="actionChoice(this)"> <label for="c2">뉴욕치즈케이크</label>
<input type="checkbox" name="checkGroup" id="d2" value="봉봉" onclick="actionChoice(this)"> <label for="d2">아몬드봉봉</label>
<br>
<input type="checkbox" name="checkGroup" id="e2" value="사랑" onclick="actionChoice(this)"> <label for="e2">사랑에빠진딸기</label>
<input type="checkbox" name="checkGroup" id="f2" value="민트" onclick="actionChoice(this)"> <label for="f2">민트초코</label>
<input type="checkbox" name="checkGroup" id="g2" value="나라" onclick="actionChoice(this)"> <label for="g2">이상한나라의솜사탕</label>
<input type="checkbox" name="checkGroup" id="h2" value="바람" onclick="actionChoice(this)"> <label for="h2">바람과함께사라지다</label>
<br>
<input type="checkbox" name="checkGroup" id="i2" value="슈팅" onclick="actionChoice(this)"> <label for="i2">슈팅스타</label>
<input type="checkbox" name="checkGroup" id="j2" value="체리" onclick="actionChoice(this)"> <label for="j2">체리쥬빌레</label>
<input type="checkbox" name="checkGroup" id="k2" value="블랙" onclick="actionChoice(this)"> <label for="k2">블랙소르베</label>
<input type="checkbox" name="checkGroup" id="l2" value="피스" onclick="actionChoice(this)"> <label for="l2">피스타치오아몬드</label>
</form>
</div>
</body>
</html>
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test030_1.html</title>
<style type="text/css">
div{text-align: center;}
</style>
<script type="text/javascript">
var maxCount = 0; // 사이즈 선택으로 최댓값 제한
var count = 0;
function choiceSize()
{
var radioObj = document.getElementsByName("radioGroup");
var msg = "선택항목이 없습니다.";
for (var i = 0; i < radioObj.length; i++) // 0 1 2 3 4 5
{
if (radioObj[i].checked)
{
msg = "당신이 선택한 사이즈는 아이스크림의 종류를 " + radioObj[i].value + "개 고를 수 있습니다.";
maxCount = Number(radioObj[i].value);
break;
}
}
alert(msg);
}
function choiceIce(ice)
{
count = 0;
var checkObj = document.getElementsByName("checkGroup");
for (var i = 0; i < checkObj.length; i++)
{
if (checkObj[i].checked)
{
if (count > maxCount)
{
alert("( " + maxCount + " ) 개 까지만 선택할 수 있습니다");
ice.checked = false;
count--;
return;
}
count++;
}
else
count--;
}
}
</script>
</head>
<body>
<div>
<h1>자바스크립트 활용</h1>
<hr>
</div>
<div>
<h2>아이스크림 주문</h2>
<form>
--- 사이즈 선택 --- <br><br>
<input type="radio" id="a1" value="1" name="radioGroup" onclick="choiceSize(this);"><label for="a1">싱글(1)</label>
<input type="radio" id="b1" value="2" name="radioGroup" onclick="choiceSize(this);"><label for="b1">더블(2)</label>
<input type="radio" id="c1" value="3" name="radioGroup" onclick="choiceSize(this);"><label for="c1">파인트(3)</label>
<input type="radio" id="d1" value="4" name="radioGroup" onclick="choiceSize(this);"><label for="d1">쿼터(4)</label>
<input type="radio" id="e1" value="5" name="radioGroup" onclick="choiceSize(this);"><label for="e1">패밀리(5)</label>
<input type="radio" id="f1" value="6" name="radioGroup" onclick="choiceSize(this);"><label for="f1">하프갤런(6)</label>
<br><br>
--- 종류 선택 --- <br><br>
<input type="checkbox" name="checkGroup" id="a2" value="엄마" onclick="choiceIce(this);"><label for="a2">엄마는외계인</label>
<input type="checkbox" name="checkGroup" id="b2" value="레인" onclick="choiceIce(this);"><label for="b2">레인보우샤베트</label>
<input type="checkbox" name="checkGroup" id="c2" value="뉴욕" onclick="choiceIce(this);"><label for="c2">뉴욕치즈케이크</label>
<input type="checkbox" name="checkGroup" id="d2" value="봉봉" onclick="choiceIce(this);"><label for="d2">아몬드봉봉</label>
<br>
<input type="checkbox" name="checkGroup" id="e2" value="사랑" onclick="choiceIce(this);"><label for="e2">사랑에빠진딸기</label>
<input type="checkbox" name="checkGroup" id="f2" value="민트" onclick="choiceIce(this);"><label for="f2">민트초코</label>
<input type="checkbox" name="checkGroup" id="g2" value="나라" onclick="choiceIce(this);"><label for="g2">이상한나라의솜사탕</label>
<input type="checkbox" name="checkGroup" id="h2" value="바람" onclick="choiceIce(this);"><label for="h2">바람과함께사라지다</label>
<br>
<input type="checkbox" name="checkGroup" id="i2" value="슈팅" onclick="choiceIce(this);"><label for="i2">슈팅스타</label>
<input type="checkbox" name="checkGroup" id="j2" value="체리" onclick="choiceIce(this);"><label for="j2">체리쥬빌레</label>
<input type="checkbox" name="checkGroup" id="k2" value="블랙" onclick="choiceIce(this);"><label for="k2">블랙소르베</label>
<input type="checkbox" name="checkGroup" id="l2" value="피스" onclick="choiceIce(this);"><label for="l2">피스타치오아몬드</label>
</form>
</div>
</body>
</html>
- Test031
- 선택목록 다루기
- 취소 버튼 / .focus
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test031.html</title>
<style type="text/css">
@import url("mystyle/greyBlue.css");
</style>
<style type="text/css">
#addMember {width: 250px;}
#memberList {width: 700px}
</style>
<script type="text/javascript">
//select 를 다루어보기 위한 테스트 함수 정의
function selectTest()
{
//확인
//alert("함수 호출 확인");
/*
// 첫 번째 방법
var position = document.getElementById("userPosition").value;
//확인
alert(position);
//--==>> trh(사원)
*/
/*
// 두 번째 방법
var positionObj = document.getElementById("userPosition");
//확인
//alert(positionObj);
//--==>> [object HTMLSelectElement]
var positionOptions = positionObj.options;
//확인
//alert(positionOptions);
//--==>> [object HTMLOptionsCollection] → 자바스크립트 배열
//alert(positionOptions.length);
//--==>>4
var positionMsg ="";
for (var i = 0; i < positionOptions.length; i++)
{
//확인
//alert(positionOptions[i].selected);
//--==>> 선택된 옵션 항목에 따라 true/false 형태로 확인
if (positionOptions[i].selected)
{
//단일 선택
positionMsg = positionOptions[i].value;
break; // 다른 옵션 확인할 필요가 없기 때문에
//다중 선택
//positionMsg += positionOptions[i].value + " "; // 중첩 구성 + 끝까지 확인해야 함
}
}
//확인
alert(positionMsg);
*/
// 세 번째 방법
var positionObj = document.getElementById("userPosition");
//확인
//alert(positionObj.selectedIndex);
//--==>> 부장→0, ... , 사원→3
//alert(positionObj.options[2].value);
//---==>> zxc(대리)
//alert(positionObj.options[0].value);
//--==>> qwe(부장)
var positionMsg = positionObj.options[positionObj.selectedIndex].value;
//확인
//alert(positionMsg);
}
function addMember()
{
var uName = document.getElementById("userName").value;
var uSsn = document.getElementById("userSsn").value;
var cityObj = document.getElementById("userCity")
var uCity = cityObj.options[cityObj.selectedIndex].value;
var departemntObj = document.getElementById("userDepartment")
var uDepartment = departemntObj.options[departemntObj.selectedIndex].value;
var positionObj = document.getElementById("userPosition")
var uPosition = positionObj.options[positionObj.selectedIndex].value;
var uBasicPay = document.getElementById("userBasicPay").value;
// 테이블 그리기
// ----------------------------------------------------------------------
var tableNode = document.getElementById("memberList");
var trNode = document.createElement("tr");
trNode.appendChild(createTdNode(uName));
trNode.appendChild(createTdNode(uSsn));
trNode.appendChild(createTdNode(uCity));
trNode.appendChild(createTdNode(uDepartment));
trNode.appendChild(createTdNode(uPosition));
trNode.appendChild(createTdNode(uBasicPay));
tableNode.appendChild(trNode);
// ---------------------------------------------------------------------
//formClear(); // check!
// 아래로는 formClear 함수와 동일한 기능
//1.
// document.getElementById("memberForm").reset(); // check! -- 테스트 이후 id 없앰
//2. forms → 자바스크립트 배열로 순서 0 ~
document.forms[0].reset();
document.getElementById("userName").focus(); // check! -- 추가 후 이름 박스에 입력할 수 있도록 클릭되어있는 상태를 만드는 기능
}
function createTdNode(val)
{
var textNode = document.createTextNode(val);
var tdNode = document.createElement("td");
tdNode.appendChild(textNode);
return tdNode;
}
/*//직접 하나하나 설정해서 함수를 만듦
function formClear()
{
document.getElementById("userName").value = "";
document.getElementById("userSsn").value = "";
var cityObj = document.getElementById("userCity");
cityObj.options[0].selected = true; //서울
var departmentObj = document.getElementById("userDepartment");
departmentObj.options[3].selected = true; //영업부
var opsitionObj = document.getElementById("userPosition");
opsitionObj.options[3].selected = true; //사원
document.getElementById("userBasicPay").value = "";
}
*/
</script>
</head>
<body>
<div>
<h1>자바스크립트 활용</h1>
<hr>
</div>
<div>
<h2>선택목록(select) 다루기</h2>
<!-- <form id="memberForm"> -->
<form>
<table>
<tr>
<td>이름</td>
<td>
<input type="text" id="userName" class="txt">
</td>
</tr>
<tr>
<td>주민번호</td>
<td>
<input type="text" id="userSsn" class="txt">
</td>
</tr>
<tr>
<td>지역</td>
<td>
<!-- <input type="text" id="userCity" class="txt"> 예측이 가능한 값은 txt 박스로 받지 않는 것이 좋다.
서울 서울시 서울특별시 등... 여러개로 나뉘질 수도 있고 우리집.. 과 같은 형태로 입력이 가능하기 때문에-->
<select id="userCity">
<option value="1123(서울)">서울</option>
<option value="2280(대전)">대전</option>
<option value="3350(광주)">광주</option>
<option value="4474(대구)">대구</option>
</select>
</td>
</tr>
<tr>
<td>부서</td>
<td>
<!-- <input type="text" id="userDepartment" class="txt"> -->
<!-- 가장 많이 사용될 것 같은 부서를 selected 속성 부여 -->
<select id="userDepartment">
<option value="9987(개발부)">개발부</option>
<option value="9986(인사부)">인사부</option>
<option value="9974(자재부)">자재부</option>
<option value="9962(영업부)" selected="selected">영업부</option>
<option value="9945(총무부)">총무부</option>
</select>
</td>
</tr>
<tr>
<td>직위</td>
<td>
<!-- <input type="text" id="userPosition" class="txt"> -->
<select id="userPosition">
<option value="qwe(부장)">부장</option>
<option value="asd(과장)">과장</option>
<option value="zxc(대리)">대리</option>
<option value="trh(사원)" selected="selected">사원</option>
</select>
</td>
</tr>
<tr>
<td>기본급</td>
<td>
<input type="text" id="userBasicPay" class="txt">
</td>
</tr>
</table>
<input type="button" value="직원 추가" class="btn" onclick="addMember()">
<!-- <input type="button" value="입력 취소" class="btn" onclick="formClear()"> -->
<input type="reset" value="입력 취소" class="btn">
<br><br>
<table id="memberList">
<tr>
<th>이름</th>
<th>주민번호</th>
<th>지역</th>
<th>부서</th>
<th>직위</th>
<th>기본급</th>
</tr>
</table>
</form>
</div>
</body>
</html>
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test031_1.html</title>
<style type="text/css">
@import url("mystyle/greyBlue.css");
</style>
<style type="text/css">
#addMember {width: 250px;}
#memberList {width: 700px;}
</style>
<script type="text/javascript">
//select 를 다루어보기 위한 테스트 함수 정의
function selectTest()
{
//확인
//alert("함수 호출 확인");
/*
// 첫 번째 방법
var position = document.getElementById("userPosition").value;
//확인
alert(position);
//--==>> trh(사원)
*/
/*
// 두 번째 방법
var positionObj = document.getElementById("userPosition");
//확인
//alert(positionObj);
//--==>> [object HTMLSelectElement]
var positionOptions = positionObj.options;
//확인
//alert(positionOptions);
//--==>> [object HTMLOptionsCollection] → 자바스크립트 배열
//alert(positionOptions.length);
//--==>>4
var positionMsg ="";
for (var i = 0; i < positionOptions.length; i++)
{
//확인
//alert(positionOptions[i].selected);
//--==>> 선택된 옵션 항목에 따라 true/false 형태로 확인
if (positionOptions[i].selected)
{
//단일 선택
positionMsg = positionOptions[i].value;
break; // 다른 옵션 확인할 필요가 없기 때문에
//다중 선택
//positionMsg += positionOptions[i].value + " "; // 중첩 구성 + 끝까지 확인해야 함
}
}
//확인
alert(positionMsg);
*/
// 세 번째 방법
var positionObj = document.getElementById("userPosition");
//확인
//alert(positionObj.selectedIndex);
//--==>> 부장→0, ... , 사원→3
//alert(positionObj.options[2].value);
//---==>> zxc(대리)
//alert(positionObj.options[0].value);
//--==>> qwe(부장)
var positionMsg = positionObj.options[positionObj.selectedIndex].value;
//확인
//alert(positionMsg);
}
function addMember()
{
var name = document.getElementById("userName").value;
var ssn = document.getElementById("userSsn").value;
var cityObj = document.getElementById("userCity");
var cityMsg = "";
var cityIndex = cityObj.selectedIndex;
switch (cityIndex)
{
case 0: cityMsg = "서울"; break;
case 1: cityMsg = "대전"; break;
case 2: cityMsg = "광주"; break;
case 3: cityMsg = "대구"; break;
}
var departmentObj = document.getElementById("userDepartment");
var departmentMsg = "";
var departmentIndex = departmentObj.selectedIndex;
switch (departmentIndex)
{
case 0: departmentMsg = "개발부"; break;
case 1: departmentMsg = "인사부"; break;
case 2: departmentMsg = "자재부"; break;
case 3: departmentMsg = "영업부"; break;
case 4: departmentMsg = "총무부"; break;
}
var positionObj = document.getElementById("userPosition");
var positionMsg = "";
var positionIndex = positionObj.selectedIndex;
switch (positionIndex)
{
case 0: positionMsg = "부장"; break;
case 1: positionMsg = "과장"; break;
case 2: positionMsg = "대리"; break;
case 3: positionMsg = "사원"; break;
}
var basicpay = Number(document.getElementById("userBasicPay").value);
var tblNode = document.getElementById("memberList"); // 테이블 접근
var trNode = document.createElement("tr"); // <tr></tr> 생성
trNode.appendChild(createTdNode(name)); // <tr><td></td></tr>
trNode.appendChild(createTdNode(ssn)); // <tr><td></td><td></td></tr>
trNode.appendChild(createTdNode(cityMsg));
trNode.appendChild(createTdNode(departmentMsg)); // :
trNode.appendChild(createTdNode(positionMsg));
trNode.appendChild(createTdNode(basicpay)); // <tr><td>이름</td>... <td>기본급</td></tr>
tblNode.appendChild(trNode); // <table><tr></tr></table>
formClear();
}
function createTdNode(val)
{
var textNode = document.createTextNode(val); // "val"
var tdNode = document.createElement("td"); // <td></td>
tdNode.appendChild(textNode);
return tdNode;
}
function formClear()
{
document.getElementById("userName").value = "";
document.getElementById("userSsn").value = "";
document.getElementById("userCity").selectedIndex = 0;
document.getElementById("userDepartment").selectedIndex = 3;
document.getElementById("userPosition").selectedIndex = 3;
document.getElementById("userBasicPay").value = "";
}
</script>
</head>
<body>
<div>
<h1>자바스크립트 활용</h1>
<hr>
</div>
<div>
<h2>선택목록(select) 다루기</h2>
<form>
<table>
<tr>
<td>이름</td>
<td>
<input type="text" id="userName" class="txt">
</td>
</tr>
<tr>
<td>주민번호</td>
<td>
<input type="text" id="userSsn" class="txt">
</td>
</tr>
<tr>
<td>지역</td>
<td>
<!-- <input type="text" id="userCity" class="txt"> 예측이 가능한 값은 txt 박스로 받지 않는 것이 좋다.
서울 서울시 서울특별시 등... 여러개로 나뉘질 수도 있고 우리집.. 과 같은 형태로 입력이 가능하기 때문에-->
<select id="userCity">
<option value="1123(서울)">서울</option>
<option value="2280(대전)">대전</option>
<option value="3350(광주)">광주</option>
<option value="4474(대구)">대구</option>
</select>
</td>
</tr>
<tr>
<td>부서</td>
<td>
<!-- <input type="text" id="userDepartment" class="txt"> -->
<!-- 가장 많이 사용될 것 같은 부서를 selected 속성 부여 -->
<select id="userDepartment">
<option value="9987(개발부)">개발부</option>
<option value="9986(인사부)">인사부</option>
<option value="9974(자재부)">자재부</option>
<option value="9962(영업부)" selected="selected">영업부</option>
<option value="9945(총무부)">총무부</option>
</select>
</td>
</tr>
<tr>
<td>직위</td>
<td>
<!-- <input type="text" id="userPosition" class="txt"> -->
<select id="userPosition">
<option value="qwe(부장)">부장</option>
<option value="asd(과장)">과장</option>
<option value="zxc(대리)">대리</option>
<option value="trh(사원)" selected="selected">사원</option>
</select>
</td>
</tr>
<tr>
<td>기본급</td>
<td>
<input type="text" id="userBasicPay" class="txt">
</td>
</tr>
</table>
<input type="button" value="직원 추가" class="btn" id="memberControl" onclick="addMember()">
<input type="button" value="입력 취소" class="btn" onclick="formClear()">
<br><br>
<table id="memberList">
<tr>
<th>이름</th>
<th>주민번호</th>
<th>지역</th>
<th>부서</th>
<th>직위</th>
<th>기본급</th>
</tr>
</table>
</form>
</div>
</body>
</html>
- Test032 & Test033
- 주소 검색
- window.open();
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test032.html</title>
<style type="text/css">
@import url("mystyle/greyBlue.css");
</style>
<style type="text/css">
.txt{width : 300px;}
</style>
<script type="text/javascript">
function searchAddr()
{
//alert("써치에이디디알");
window.open("Test033.html", "test", "width=500, height=300");
// ------ 내부적으로 해당 객체를 식별하기 위한 이름
}
</script>
</head>
<body>
<div>
<h1>자바스크립트 활용</h1>
<hr>
</div>
<div>
<h2>주소 검색</h2>
<form>
기본주소
<input type="text" id="addr1" readonly="readonly" class="txt">
<input type="button" value="검색" class="btn" onclick="searchAddr()">
<br><br>
상세주소
<input type="text" id="addr2" class="txt">
<br><br>
<span id="txt1" style="color: orange; font-weight: bold;"> 눈으로 확인할 수 있도록 처리 </span>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test033.html</title>
<style type="text/css">
a {font-size: small;}
</style>
<script type="text/javascript">
function actionAddr(addr)
{
// 확인
//alert("액션에이디디알");
//alert(addr);
//document.getElementById("addr1").value = "1234"; //-- 아무일도 일어나지 않는다(!)
//wondow //--> BOM 객체
//document //--> DOM 객체
//Test032 에서 Test033 을 오픈 했기 때문에 (window.opner)사용 가능
//window.opener.document.getElementById("addr1").value = "1234";
window.opener.document.getElementById("addr1").value = addr;
// check!
//window.opener.document.getElementById("txt1").value = addr; //-- txt1 에 입력되지 않음.
//window.opener.document.getElementById("txt1").innerText = addr; //-- InternetExplorer 용
window.opener.document.getElementById("txt1").innerHTML = addr; //-- CR, FF, ...
//주소 건네주고 닫기
// 해당 window 는 Test033을 의미한다.
window.close();
}
</script>
</head>
<body>
<div>
<form>
주소검색
<input>
<input type="button" value="검색"><br><br>
<!-- 특정 키워드로 검색되었다고 가정할 때 -->
<!-- a 태그로 주소 뿐만 아니라 함수호출도 가능 -->
<!-- <a href="http://www.test.com">서울 마포구 서교로 1가 (1~73번지)</a><br> -->
<!-- <a href="actionAddr()">서울 마포구 서교로 2가 (74~120번지)</a><br>
--==>> 404 Not Found -->
<!-- 자바스크립트에 있는 함수를 의미 -->
<a href="javascript:actionAddr('04031 서울특별시 마포구 월드컵북로 5')">서울특별시 마포구 월드컵북로 5 (서교동)</a><br>
<a href="javascript:actionAddr('03995 서울특별시 마포구 월드컵북로 6')">서울특별시 마포구 월드컵북로 6 (동교동)</a><br>
<a href="javascript:actionAddr('04031 서울특별시 마포구 월드컵북로 7')">서울특별시 마포구 월드컵북로 7 (서교동)</a><br>
<a href="javascript:actionAddr('03995 서울특별시 마포구 월드컵북로 8')">서울특별시 마포구 월드컵북로 8 (동교동)</a><br>
<a href="javascript:actionAddr('04031 서울특별시 마포구 월드컵북로 9-1')">서울특별시 마포구 월드컵북로 9-1 (서교동)</a><br>
<a href="javascript:actionAddr('03992 서울특별시 마포구 월드컵북로 12')">서울특별시 마포구 월드컵북로 12 (동교동)</a><br>
<a href="javascript:actionAddr('04001 서울특별시 마포구 월드컵북로 13')">서울특별시 마포구 월드컵북로 13 (서교동)</a><br>
</form>
</div>
</body>
</html>
- Test034
- 메뉴 보이기 / 감추기 / on이벤트 확인
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test034.html</title>
<style type="text/css">
@import url("mystyle/greyBlue.css");
</style>
<style type="text/css">
#menuTable {display : none;} /* check! */
</style>
<script type="text/javascript" src="js/myMenu.js"></script> <!-- check -->
</head>
<body>
<div>
<h1>자바스크립트 활용</h1>
<hr>
</div>
<div>
<h2>메뉴 보이기 / 감추기</h2>
<div>
<form>
<!-- 클릭 시 테이블 메뉴 보이기 -->
<!-- <input type="button" value="메뉴 보이기" class="btn" onclick="myMenu()"> -->
<input type="button" value="메뉴 보이기" class="btn" onclick="myMenu(1)">
<!-- 클릭 시 테이블 메뉴 감추기 -->
<!-- <input type="button" value="메뉴 감추기" class="btn" onclick="myMenu()"> -->
<input type="button" value="메뉴 감추기" class="btn" onclick="myMenu(2)">
<!-- 버튼 위에 마우스 커서를 올려놓으면 메뉴 테이블이 보이고
다시 버튼위에 머물던 마우스 커서가 버튼의 영역을 빠져나가면 메뉴 테이블 감추기 -->
<!-- 이벤트 종류 확인하라는 의도 -->
<input type="button" value="메뉴 보이기/감추기"class="btn" onmouseover="myMenu(1)" onmouseleave="myMenu(2)">
</form>
</div>
<br><br>
<div id="menuTable">
<table>
<tr>
<td><a href="">JAVA 기초</a></td>
</tr>
<tr>
<td><a href="">오라클 중급</a></td>
</tr>
<tr>
<td><a href="">JSP 고급</a></td>
</tr>
<tr>
<td><a href="">Servlet 응용</a></td>
</tr>
</table>
</div>
</div>
</body>
</html>
/**
* myMenu.js
*/
/*
function myMenu1()
{
alert("웨옹");
}
function myMenu2()
{
alert("웨옹");
}
*/
function myMenu(status)
{
//alert("웨옹");
var menu = document.getElementById("menuTable");
if (status==1)
{
//확인
//alert("1");
// 속성값 지정시에 대상.style.속성명 = 속성값;
menu.style.display = "block"; // 들어갈 수 있는 값 - block, inline, inline-block, none
//
}
else
{
//alert("2");
menu.style.display = "none";
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test035.html</title>
</head>
<body>
<!--
■■■ 웹 기초 내용 정리 ■■■
- 구조적 설계(HTML)
·컨텐츠에 대한 레이아웃 구성(부모 자식 관계 설정)
·... 태그에 대한 공부(인라인/블럭)
http://www.w3schools.com/
http://koxo.com/
- 프리젠테이션 추가(CSS)
·선택자 구성 및 설정
1.『*』 공용 선택자
모든 엘리먼트를 선택한다.
2.『E』 (엘리먼트 선택자, 태그 선택자, 타입 선택자)
E 엘리먼트를 선택한다.
3.『.』 (클래스 선택자)
HTML 에서만 사용할 수 있으며... 예를 들어, 『tr.even』은
『even』이라는 클래스를 갖고있는 tr 엘리먼트를 선택하게 된다.
class 는 하나의 페이지에 동일한 class를 여러번 사용할 수 있기 때문에
반복적으로 여러 번 등장하는 스타일의 경우 지정하여 사용할 수 있다.
4.『#』 (아이디 선택자)
예를 들어... 『#user』라는 선택자는 아이디가 『user』인 엘리먼트를 선택하게 된다.
5.『E F』 (하위 선택자, 자손 선택자)
E 엘리먼트 하위에 있는 F 엘리먼트를 선택하게 된다.
이 경우, F는 E의 바로 직접적인 자식 엘리먼트가 아니어도 무방하다.
6.『E>F』 (자식 선택자)
E 엘리먼트의 자식 엘리먼트인 F 엘리먼트를 선택하게 된다.
7.『E+F』 (인접선택자)
E 엘리먼트와 F 엘리먼트가 서로 동등한 관계에서 인접해 있는 경우 선택하게 된다.
8.『E:hover』, 『E:active』, 『E:focus』,... (동적 선택자, 가상 선택자)
사용자 액션 또는 대상 엘리먼트의 상태가
선택자로 구성한 상태에 해당하는(만족하는) E 엘리먼트를 선택하게 된다.
·CSS 의 선언방법
1. 외부 선언
<link rel="stylesheet" type="text/css" href="css/myStyle.css">
2. 문서 안에 포함하여 선언
<style type="text/css">
div {...}
</style>
3. 엘리먼트(태그)에 직접 선언
<input tpye="text" style="width:200px; height: 40px;">
- 동작, 행동 및 기능 추가(Javascript)
·자바스크립트의 특징
1. 인터프리트 언어
컴파일 과정이 필요없이 브라우저가 읽고, 해석하고, 실행한다.
(자바스크립트엔진)
2. 동적 데이터타입
모든 변수를 『var』 로 선언하면 끝이다.
데이터타입을 별도로 지정할 필요가 없다.
3. 객체 지향 언어
단, 자바와 다른 점은 클래스 개념을 사용하지 않으며
생성자 함수를 정의하는 형태로 객체를 사용하게 되며,
프로토타입을 활용하게 된다.
·자바스크립트가 직접적으로 많이 사용되는 용도
1. 이벤트에 반응하는 동작의 구형
2. AJAX 를 통해 페이지 로딩 과정 없이 컨텐츠 연동이나 데이터 제출 가능
// AJAX의 장점들을 여기저기서 가져와서 묶어서 사용
3. HTML 엘리먼트 구조 / CSS 디자인 등을 동적으로 전환
4. 사용자 입력 데이터에 대한 사전 검증(서버로 전송하기 전에)
// 서버로 데이터를 전송하게 되면 고치기가 힘들기 때문에 전송전에 데이터 검증!
// 유저가 서버로 직접 데이터를 넘기는 것이 아니고, 넘겨받은 js 가 확인 후 서버로 넘겨준다.
·자바스크립트 객체
1. 내장 객체, 사용자 정의 객체
※ 내장 객체는 생성자 함수가 미리 정의되어(작성되어) 있으며,
사용자 정의 객체는 사용자가 이 생성자 함수를 정의하는 것이다.
2. 사용자 정의 객체
① 객체와 연관된 데이터는 객체가 생성될 때 초기화 되어야하는데...
생성자 라고 부르는 특별한 함수가 객체를 활성화 시키는데 필요하다.
var arr = new Array();
// ------- 생성자 함수
② 생성자로 객체를 생성하기 위해서는
자바와 마찬가지로 『new』연산자를 활용하게 된다.
③ 생성자(객체)의 이름은 첫 글자를 대문자로 표기한다.
→ 생성자 함수를 정의할 때의 이름 규칙
④ 생성자 내부에 속성, 함수를 생성하기(정의하기)위해
『this』 키워드를 사용한다.
⑤ 객체의 멤버인 속성과 함수는 『.(dot)』 연산자로 접근한다.
// ex) arr.length
⑥ 사용자 정의객체를 만드는 기본 형식 및 구조
(생성자를 구성하는 기본 형식 및 구조)
function 생성자명(인자리스트) // ← 생성자명의 첫 글자... 대문자
{ // └> 일반적인 함수가 아님을 확인 가능
// 속성 정의
this.멤버명 = 인자;
// 메소드(함수) 정의 // 기능 역시 속성의 일부로 생각하고 this를 붙이고
this.멤버명 = function(인자리스트) // 이름 없는 함수를 생성한다.
{
// 메소드(함수) 내부 코드
...
return 리턴값;
}; // ★세미콜론★ -- 자바의 익명의 클래스 구성과 동일한 개념
}
⑦ 프로토타입
한 객체가 가지고 있는 속성과 메소드(함수)를
다른 객체(혹은 여러 다른 객체)가 공유할 수 있도록 지원하는 개념
ex) function Car(x,y) // 생성자 함수 (대문자) 를 정의
{
this.x=x; //속성1
this.y=y; //속성2
this.getDistance = function () // 기능1
{
return (this.x * this.x + this.y * this.y);
}
}
→ 이 코드가 자동차(Car) 를 나타내는 객체라고 가정한다.
여기서 『getDistance()』는 원래 위치로부터의 이동거리를 계산하는 함수라고 가정한다.
여러 개의 자동차를 사용하는 경우..
var c1 = new Car(10, 20);
var c2 = new Car(10, 50);
:
var c100 = new Car(10, 42);
이와 같은 구문을 활용하여 객체를 생성했다면...
객체들마다 『getDistance()』함수를 가지게 되면서 메모리를 낭비하게 된다.
// getDistance() 를 사용하지 않는다면 -> 메모리낭비
이 때... 객체들마다 함수를 가지는 것이 아니라
하나의 함수를 만들어 공유하기 위해 프로토타입을 정의하게 된다.
※ 모든 객체는 프로토타입이라는 숨겨진 객체를 포함하고 있다.
『Car』객체의 프로토타입은 『Car.prototype』이라는
숨겨진 객체를 갖고 있다는 것이다.
function Car(x,y)
{
this.x=x;
this.y=y;
}
// --------- 체이닝(?) 체인을 걸어둠 : 이러면 필요할 때만 불러서 사용이 가능하다.
Car.prototype.getDistance = function()
{
return (this.x * this.x + this.y * this.y);
};
var c3 = new Car(10,80);
c3.getDistance();
-->
</body>
</html>
- Test036
- 자바스크립트 객체(사용자 정의 객체)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test036.html</title>
<link rel="stylesheet" type="text/css" href="mystyle/main.css">
<style type="text/css">
th{text-align: left;}
</style>
<script type="text/javascript">
function objTest()
{
//alert("테스트");
//사용자 정의 객체(생성자 함수)정의
function Blog(b,d)
{
// 객체를 구성하는 속성
this.body=b;
this.date=d;
}
// 객체 생성
var blog = new Blog("블로그 개설", "2023-05-01");
// 생성된 객체의 속성(멤버) 접근
var str = blog.body + " / " + blog.date;
// 확인
//alert(str);
/*
var ob1 = new Blog("블로그 개설", "2023-05-01");
var ob2 = new Blog("블로그 레이아웃 구성", "2023-05-05");
var ob3 = new Blog("생성자를 이용한 객체 생성", "2023-05-12");
var arr = [ob1, ob2, ob3];
*/
// 위와 동일한 코드 (한 줄 구성)
var arr = [new Blog("블로그 개설", "2023-05-01")
, new Blog("블로그 레이아웃 구성", "2023-05-05")
, new Blog("생성자를 이용한 객체 생성", "2023-05-12")];
str = "<table border='1' class='table'>";
str += "<tr><th>제목</th><th>날짜</th></tr>";
for (var i = 0; i < arr.length; i++) // 0 1 2
{
str +="<tr>"
str +="<td>" + arr[i].body + "</td>";
str +="<td>" + arr[i].date + "</td>";
str +="</tr>"
}
str += "</table>";
var result = document.getElementById("result");
result.innerHTML = str;
}
</script>
</head>
<body>
<div>
<h1>자바스크립트 활용</h1>
<hr>
</div>
<div>
<h2>자바스크립트 객체(사용자 정의 객체)</h2>
<div>
<input type="button" value="사용자 정의 객체 테스트" class="btn control" onclick="objTest()">
<!-- └> class 가 btn 이기도 하면서 control 이기도 함 -->
<br><br>
<div id="result"></div>
</div>
</div>
</body>
</html>
- Test037
- Test036 과 비교
- 날짜 객체
- 사용자정의 객체에 기능 함수 포함
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test037.html</title>
<link rel="stylesheet" type="text/css" href="mystyle/main.css">
<style type="text/css">
th{text-align: left;}
</style>
<script type="text/javascript">
function objTest()
{
//alert("테스트테스트");
// 사용자 정의 객체
// ※ Test036.html 에서와 마찬가지로 사용자 정의 객체 구성
// 단 차이점 확인~
function Blog(b,d)
{
// 주요 속성 구성
this.body=b;
this.date=d;
// 날짜 출력용 기능(함수) 정의 //-- 차이점 1 : 기능이 있음
this.userLocalString=function() // 해당 함수의 이름은 userLocalString 이라고 봐도 무방
{
return d.getFullYear() + "-" + (d.getMonth()+1) + "-" + d.getDate();
};
}
// 객체 생성
var blog = new Blog("블로그 개설", "2023-05-01");
var str = blog.body + " / " + blog.date;
// 확인
//alert(str);
//Test036.html 에서와 마찬가지로
// 사용자 정의 객체 여러 개를 자바스크립트 배열 구조에 저장.
// 단, 차이점 확인~ check
// → 자바스크립트 내장 객체 활용
/*
var arr = [new Blog("블로그 개설", "2023-05-01")
, new Blog("블로그 레이아웃 구성", "2023-05-05")
, new Blog("생성자 이용한 객체 생성", "2023-05-12")];
*/
var arr = [new Blog("블로그 개설", new Date("2023/05/01"))
, new Blog("블로그 레이아웃 구성", new Date("2023/05/05"))
, new Blog("생성자 이용한 객체 생성", new Date("2023/05/12"))];
/*
○ 자바스크립트에서의 날짜 데이터
Date 객체는 날짜와 시간 작업을 하는데 사용되는
가장 기본적인 자바스크립트 내장 객체이다.
var now = new Date();
now.toString();
now.toLocaleString(); //-- Locale
now.toLocaleDateString(); //-- Locale
now.toLocalTimeString(); //-- Local
now.getFullYear(); //-- 연도
now.getMonth()+1; //-- check : 월 단위는 자바에서처럼 0 부터 시작.
now.getDate(); //-- 날짜
※ 주의 ※
var userDate1 = new Date("2023/05/01"); //--(○)
var userDate2 = new Date(2023, 5, 1); //--(○)
var userDate3 = new Date(May, 1, 2023); //--(○)
var userDate4 = new Date("2023-05-01"); //--(Ｘ)
var userDate5 = new Date("20230501"); //--(Ｘ)
*/
}
</script>
</head>
<body>
<div>
<h1>자바스크립트 활용</h1>
<hr>
</div>
<div>
<h2>자바스크립트 객체(사용자 정의 객체)</h2>
<div>
<input type="button" value="사용자 정의 객체 테스트" class="btn control" onclick="objTest()">
<br><br>
<div id="result"></div>
</div>
</div>
</body>
</html>