1. Toggle
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Toggle(1).html</title>
<script>
function toggle() {
//alert("toggle()함수호출")
//버튼의 겉의 이름구하기->document.form이름.버튼이름(입력양식).속성
// document.form이름.버튼이름(입력양식).속성=새로운 값을 저장
// var b_val=document.f.b_name.value; (1)
var b_val = document.getElementById("b_name").value //(2)
//alert(b_val)
//if문->둘중에 하나값을 체크->처리
/* (1)
if(b_val=="네이버")
document.f.b_name.value="다음"; //b_val="다음" (X)
else //다음
document.f.b_name.value="네이버"; */
//(2)삼항연산자->if문 대용=>형식) 변수명=(조건식)?참인문장:거짓인문장;
var text = (b_val == "네이버") ? "다음" : "네이버";
document.f.b_name.value = text;
}
</script>
</head>
<body>
<center>
<h1>버튼을 눌러주세요</h1>
<form name="f">
<input type="button" value="네이버" onclick="toggle()" name="b_name" id="b_name">
</form>
</center>
</body>
</html>
2. 이벤트처리(회원가입)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>form(2).html</title>
<script>
function test() { //전송
//이름?
if (document.myform.name.value == "") {
alert("이름은 필수 입력입니다.");
document.myform.name.focus(); //이름란에 커서 넣어주세요
return false; //탈출문
}
//전번?
if (document.myform.tel.value == "") {
alert("전번은 필수 입력입니다.");
document.myform.tel.focus();
return false;
}
//암호?
if (document.myform.pwd.value == "") {
alert("암호는 필수 입력입니다.");
document.myform.pwd.focus();
return false; //중간에 빠져나가라는 탈출문
}
//위의 문장처럼 정상적으로 입력을 다하면 무조건 action="a.jsp"으로 전송하라
/*
일반버튼이 전송버튼처럼 전송을 시키고 싶다.
형식) document.myform(폼이름).submit()을 사용해야 된다. <input type="button" ~>
document.myform(폼이름).submit()을 생략가능-><input type="submit">
*/
}
function test2() { //암호는 4자이상 8자이하만 입력을 허용->length->써진글자의 길이
if (document.myform.pwd.value.length >= 4 &&
document.myform.pwd.value.length < 8) {
alert("정상적으로 암호를 입력했습니다.");
document.myform.pwd.focus();
} else {
alert("암호는 4자이상 ,8자이하 입력요망!");
document.myform.pwd.focus();
}
}
function test3() {
document.myform.reset(); //document.폼이름.reset()=>입력한 글자 모두 삭제->다시입력
document.myform.name.focus(); //맨 첫번째 항에 커서입력
}
</script>
</head>
<body>
<!-- submit전송 버튼을 클릭 onsubmit="return 호출할 함수명()" -->
<form name="myform" method="post" action="a.jsp" onsubmit="return test()">
이름:<input type="text" name="name" size="10"><br>
전번:<input type="text" name="tel" size="10"><br>
암호:<input type="password" name="pwd" size="10"><br>
<input type="submit" value="전송">
<input type="button" value="암호입력" onclick="test2()">
<input type="button" value="다시입력" onclick="test3()">
</form>
</body>
</html>
3. 배열(Array)의 개요 및 작성법
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>배열(Array)의 개요 및 작성법(3).html</title>
<script>
/*
배열(array)=>같은 자료형의 변수들의 집합체 (ex 계란판, 기차)
var name="홍길동" var age=23
배열을 사용하지 않은 경우
단점:변수의 갯수가 많아진다. 메모리에 랜덤(무작위로) 저장->검색해서 불러오는 속도느리다
성적처리->과목수,총점,평균,석차(정수)
배열을 사용하면 좋은 장점->변수의 갯수는 1개(대표이름)
메모리에 연속적으로 저장->속도향상
형식) 배열이름(변수의 대표이름)=new Array(요소1,요소2,,요소n)
*/
a = new Array("배열", "인덱스", "길이", "추가");
// 0 1 2 3 ->배열은 인덱스
//var a="배열", var b="인덱스", var c="길이", var d="추가";
document.write("배열의 길이=>" + a.length + "<br>");
a2 = new Array(30, 10, 50, 40, 20); //숫자끼리 (같은 자료형)
document.write("sort=>" + a2.sort() + "<br>"); //배열명.sort()
document.write("reverse=>" + a2.reverse() + "<br>"); //배열명.revese()
document.write("a2[1]=>" + a2[1] + "<br>");
document.write("a2[3]=>" + a2[3] + "<br>");
var a3 = ["포도", "사과"]; //형식) 배열명=[요소1,요소2,,,요소n];
document.write("a3[1]=>" + a3[1] + "<br>")
</script>
</head>
<body>
</body>
</html>
4. Radio
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Radio(4).html</title>
<script>
function test() {
//1.만약에 1.gif를 선택했다면=>if()
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("3개의 그림중 하나는 무조건 선택해야 합니다.")
}
</script>
</head>
<body>
<form name="myform">
맘에 드시는 그림을 선택하세요 <p>
<!--
여러개의 항목이지만 하나밖에 선택을 할 수 없는 경우(배열을 이용)
ok=new Array(1.gif,2.gif,3.gif) =>ok[0],ok[1],ok[2]
-->
<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" value="확인" onclick="test()">
</form>
</body>
</html>
5. CheckBox
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CheckBox(5).html</title>
<script>
function test() {
//1.만약에 1.gif를 선택했다면=>if(조건식)이 true인 경우->==true은 생략이 가능하다.
var sel = ""; //선택한 그림을 저장할 문자열 변수=>""+"1번"=>"1번"+"2번"+"3번"
if ((document.myform.a1.checked == false) &&
(document.myform.a2.checked == false) &&
(document.myform.a3.checked == false)) {
alert("최소한의 한 그림은 선택하셔야 됩니다.");
} else {
//-----------최소하나는 선택한다는 조건----------------------
if (document.myform.a1.checked)
sel += " 1번"; //배정연산자=>하나의 변수에 값을 저장->누적해서 저장
//변수=변수+값=>sel=sel+"1번"
if (document.myform.a2.checked)
sel += " 2번";
if (document.myform.a3.checked == true)
sel += " 3번";
alert(sel + "그림이 맘에 드시는 군요!");
}
}
</script>
</head>
<!-- 화면디자인한 이미지,글->마우스 오른쪽버튼 금지,드래그&드롭 금지
oncontextmenu="return false" ->마우스 오른쪽 금지
ondragstart="return false" ->드래그 시작 금지
onselectstart="return false" ->선택(블럭지정) 금지
-->
<body oncontextmenu="return false" ondragstart="return false" onselectstart="return false">
<form name="myform">
맘에 드시는 그림을 선택하세요 <p>
<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" value="확인" onclick="test()">
</form>
</body>
</html>
6. select
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>select(6).html</title>
<script>
function fg_color(form) { //form=document.f_list.form
//var list=document.f_list.form.selectedIndex;//option항목의 인덱스번호
var list = form.selectedIndex;
//alert(list)
/*
document.fgColor(글자색) or bgColor(배경색)=선택한 항목의 색깔
document.f_list.form.options[내가 선택한 인덱스번호].text(겉의 항목이름)
document.f_list.form.options[내가 선택한 인덱스번호].value(내부 항목이름)
*/
//alert(document.f_list.form.options[f_list.form.selectedIndex].value);
document.bgColor = form.options[list].value;
}
</script>
</head>
<body>
<center>
<h3>글자색 변경하기</h3>
원하시는 색상을 선택하시면 글자의 색깔,배경색이 변경됩니다.<p>
<form name="f_list">
<!--
<select name="form" size="항목수"(리스트박스 작성하는 방법)
한꺼번에 여러개 항목을 선택(multiple)>
-->
<!-- <select name="form" size="4" multiple> -->
<select name="form" onchange="fg_color(document.f_list.form)">
<option value="blue">파랑색</option>
<option value="green" selected>초록색</option>
<option value="orange">오렌지색</option>
<option value="gray">회색</option>
</select>
</form>
</center>
</body>
</html>
7. DOM을 이용한 버튼을 동적으로 생성
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM을 이용한 버튼을 동적으로 생성(7).html</title>
<!--
DOM(Document Object Model)->html문서 or xml문서를 읽어들여서 그 문서의 구조
(트리구조대로 메모리에 태그정보를 만들어서 관리해주는 기법=>동적인 화면 디자인을 할때
-->
<script>
function appendItem() {
//1.h1태그를 생성->document(부모태그).createElement("생성할 태그명")
var header = document.createElement("h1"); //<h1></h1>
//alert(header) [object~]
//2.태그내부에 존재하는 문자열=>텍스트노드(node) 생성
// document.createTextNode("출력할 문자열");
var textNode = document.createTextNode("DOM연습"); //innerHTML속성과 동일
//3.<h1>DOM연습</h1>->부모태그명.appendChild(추가시킬 자식태그명)
header.appendChild(textNode);
//4.화면에 출력-><body>태그에 추가->document.body
var home = document.getElementById("itemList");
home.appendChild(header)
}
</script>
</head>
<body>
<input type="button" value="추가" onclick="appendItem()">
<div id="itemList">
<!--
<div id="item_1">새로 추가된 아이템1[삭제버튼]</div>
<div id="item_2">새로 추가된 아이템2[삭제버튼]</div>
,,,
<h1>DOM연습</h1>
-->
</div>
</body>
</html>'KIC > HTML-CSS-JS' 카테고리의 다른 글
| [HTML/CSS/JS] DAY7 (0) | 2020.10.12 |
|---|---|
| [HTML/CSS/JS] DAY5 (0) | 2020.10.12 |
| [HTML/CSS/JS] DAY4 (0) | 2020.10.12 |
| [HTML/CSS/JS] DAY3 (0) | 2020.10.12 |
| [HTML/CSS/JS] DAY2 (0) | 2020.10.12 |