# Array
<head>
<meta charset="UTF-8">
<title>1. 배열(Array)의 개요 및 작성법.html</title>
<script>
/*
자료형(type) : 저장되는 데이터의 크기와 범위를 지정해줌
배열(Array) : 1. 같은 자료형의 변수들의 집합체 (ex var name = "홍길동"
var age = "23")
2. 연속적으로 잡혀져 있는 공간(아파트, 계란, 기차)
ex) 성적처리 : 과목 수, 총 점, 평균, 등 수(석차)
단점 : 1. 변수의 개수가 많아짐(기억하기 힘듦)
2. 메모리에 랜덤(무작위로 저장) = 위치파악에 시간이 걸림
형식 : 배열이름(변수의 대표적이름) = new Array(값1,값2,값3....)
*/
var a = new Array("배열","인덱스","길이","추가");
// 0 1 2 3
document.write("배열의 길이 -> "+a.length+"<br>"); // 배열명, 속성명
var a2 = new Array("21c", "자바스크립트 응용"); // 배열명(a).concat(배열명)
document.write("합친내용 -> "+a.concat(a2)+"<br>");
a3 = new Array(30, 10, 50, 40, 20); // 정렬 : 오름차순 (10,20,30,40,50)
// 내림차순 (50,40,30,20,10)
document.write("sort(정렬) -> " +a3.sort()+"<br>");
document.write("reverse(역정렬) -> " +a3.reverse()+"<br>");
// var 배열명 = [요소1, 요소2, 요소3.....] 배열명[인덱스번호]
var a4 = ["포도", "사과", "바나나"]
document.write(a4[0] + " 0번째 과일<br>");
a4[1] = "감"; // 배열명[인덱스번호] = 새로 저장할 값
// 사과 -> 감 변경
document.write("사과가 원래 1번째 과일이였는데 " + a4[1] + " 으로 바뀌었네<br>");
//배열명.push(새로 저장할 값)
a4.push("배");
console.log(a4);
document.write("배열의 길이 -> "+a4.length+"<br>");
document.write("sort(정렬) -> " +a4.sort()+"<br>");
document.write("reverse(역정렬) -> " +a4.reverse()+"<br>");
</script>
</head>
<body>
</body>
# Radio
<head>
<meta charset="UTF-8">
<title>2. Radio.html</title>
<script>
function test() {
// 1. 만약에 1.gif를 선택했다면 (=체크 했다면 checked)
if(document.myForm.ok[0].checked == true) {
alert("1번째 확인");
} else if (document.myForm.ok[1].checked == true){
alert("2번째 확인");
} else if (document.myForm.ok[2].checked == true){
alert("3번째 확인");
} else{
alert("선택을 하세요.");
}
}
</script>
</head>
<body>
<form name = "myForm">
마음에 드시는 그림을 선택하세요.<p>
<!--
여러개의 항목 이지만 하나밖에 선택을 할 수 없는 경우 = 배열(같은 변수명을 사용)
ok = new Array("1.gif", "2.gif", "3.gif"); -> ok[0], ok[1], ok[2]
or
ok = ["1.gif", "2.gif", "3.gif];
-->
<input type = "radio" name = "ok">1.<img src = "../images/1.gif"><p>
<input type = "radio" name = "ok">2.<img src = "../images/2.gif"><p>
<input type = "radio" name = "ok">3.<img src = "../images/3.gif"><p>
<input type = "button" name = "ok" value = "확인(결재)" onclick = "test()">
</form>
</body>
# Checkbox
<head>
<meta charset="UTF-8">
<title>3. Checkbox.html</title>
<script>
function test() {
// 1. 만약에 1.gif를 선택했다면 (=체크 했다면 checked)
var sel = ""; // 선택한 그림을 저장할 변수(문자열 형태로)
// 제어문내부에 또 다른 제어문 (중첩 if)
if((document.myForm.a1.checked == false) && (document.myForm.a2.checked == false) && (document.myForm.a3.checked == false)){
alert("최소 하나마 이상 선택 하세요.");
} else{ // 한개이상 선택한 경우 (1),(2),(3),(1,2),(1,3),(2,3),(1,2,3)
if(document.myForm.a1.checked) { // == true 는 생략 가능
sel += " 1번"; // "" + "1번" -> "1번" 대입연산자
console.log(sel);
} if (document.myForm.a2.checked == true){
sel = sel +" 2번"; // "1번 2번"
console.log(sel);
} if (document.myForm.a3.checked == true){
sel = sel + " 3번"; // "1번 2번 3번"
console.log(sel);
}
alert(sel + " 그림이 마음에 드시는 군요!");
}
}
</script>
</head>
<body oncontextmenu = "return false" ondragstart = "return false" onselectstart = "return false">
<!--
화면디자인한 이미지, 글을 마우스 오른쪽버튼&드래그&드롭 금지
oncontextmenu = "return false" : 마우스 우클릭 금지
ondragstart = "return false" : 마우스 드래그 금지
onselectstart = "return false" : 선택(블럭지정) 금지
-->
<form name = "myForm">
마음에 드시는 그림을 선택하세요.<p>
<!--
checkbox 는 여러개를 동시에 선택이 가능(각각 따로 저장하는 변수가 필요함)
-->
<input type = "checkbox" name = "a1">1.<img src = "../images/1.gif"><p>
<input type = "checkbox" name = "a2">2.<img src = "../images/2.gif"><p>
<input type = "checkbox" name = "a3">3.<img src = "../images/3.gif"><p>
<input type = "button" name = "ok" value = "확인(결재)" onclick = "test()">
</form>
</body>
# Select
<head>
<meta charset="UTF-8">
<title>4. Select.html</title>
<script>
function fg_color(form) { // form = document.f_list.form;
var list = form.selectedIndex; // 전달O -> 코딩이 복잡하지않고 단순해짐
//var list = document.f_list.form.selectedIndex
/*
document.fgColor(=글자색(전경색)<->bgColor(배경색)=선택한색깔)
document.f_list.form.options[내가 선택한 인덱스번호].text(겉의 이름)
document.f_list.form.options[내가 선택한 인덱스번호].value(내부 이름)
*/
//alert(document.f_list.form.options[f_list.form.selectedIndex].text)
//alert(form.options[list].value); // 매개변수o
//document.fgColor=form.options[list].value;
document.bgColor=form.options[list].value;
}
</script>
</head>
<body>
<center>
<h3>글자색 변경하기</h3>
원하시는 색상을 선택 하시면 선택한 색으로 글자색이 변경됩니다.<p>
<form name = "f_list">
<select name = "form" onchange = "fg_color(document.f_list.form)">
<!--
list박스 작성 하는 방법 : size = "항목수"
list박스 에서 한꺼번에 여러개 항복을 선택 : multiple (shift, ctrl 다중선택)
text속성(겉의 이름), value속성(내부적인 이름)
*같은 태그가 여러개 나오면 배열
<select name ="form" size = 4 multiple>
-->
<option value = "blue">파란색</option>
<option value = "green">초록색</option>
<option value = "orange">오렌지색</option>
<option value = "gray">회색</option>
</select>
</form>
</center>
</body>
# DOM
<head>
<meta charset="UTF-8">
<title>6. DOM을 이용해서 버튼을 동적으로 생성하기(2).html</title>
<script>
var count = 0; // 전역변수 : 함수 밖에 선언된 변수(전체 프로그램에서 다 사용되는 변수)
// div 태그를 생성할 개수
function appendItem(){ // 추가
// alert("ㅎㅇ");
count = count +1; // count += 1 -> count++;
// 1. div태그생성 : <div></div>, <h1></h1>
// 형식 : document.createElement(생성할 태그명)
var newItem = document.createElement("div");
//alert(newItem);
// 2. <div id = "item_" + 생성한번호></div>
// 형식 : 생성된태그명.setAttribute(만들속성명, 속성값)
newItem.setAttribute("id", "item_"+count); // <div id = "item_1"></div>
// 3. 텍스트노드생성
// 3-1. createTextNode함수(내용이 적을때)
// 3-2. innerHTML속성(긴 문장을 쓸때)
// <시작>내용</종료>, <시작></종료> = <시작 />
var html = '새로 추가된 아이템['+count+']'+'<input type = "button" value = "삭제" '+' onclick = "removeItem('+count+')" />';
// 4. 결합 : newItem.innerHTML = '저장할값';
newItem.innerHTML = html; // <div id = "item_1">새로 추가된 아이템</div>
// 5. 부모태그의 정보 얻어오기
var itemListNode = document.getElementById("itemList");
// 6. 자식태그 추가 : 부모태그명.appendChild(자식태그명)
itemListNode.appendChild(newItem); // 시각화
}
//삭제시키는 태그를 호출하는 함수
function removeItem(idCount) {
//삭제시킬 태그 정보
var item = document.getElementById("item_"+idCount); //item_1
//alert(item);
// appendChild<->부모태그명.removeChild(삭제시킬 태그명)
// 부모태그를 얻어오는 방법 2 : 자식태그명.parentNode = 부모태그
// id를 모를때 사용
item.parentNode.removeChild(item);
}
</script>
</head>
<body>
<!--
정적 디자인 : html, css (있는 그대로 보여주는 디자인 방법)
동적 디자인 : 처음에는 없는데 이벤트를 발생시켜서 화면에 특정영역에 출력
시키는 방법(메모리에 저장해서 최종적으로 출력함)
-->
<input type="button" value="추가" onclick="appendItem()">
<div id = "itemList">
<!--
<div id = "item_"+1>새로 추가된 아이템1[삭제버튼]</div>
-->
</div>
</body>'국비학원 > 공부' 카테고리의 다른 글
| 7일차 jsp ~ oracle 설치 (1) | 2023.05.04 |
|---|---|
| 6일차 jsp(미니 프로젝트) (0) | 2023.04.28 |
| 4일차 jsp(2) (0) | 2023.04.24 |
| 3일차 css(2) ~ javascript(jsp) (0) | 2023.04.23 |
| 2일차 css ~ div (0) | 2023.04.20 |