KIC/HTML-CSS-JS
[HTML/CSS/JS] DAY5
octopengj
2020. 10. 12. 12:31
1. 함수의 개요 및 작성, 종류
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>함수 작성,종류(1).html</title>
<script>
/*
프로그램을 작성(=회사 창업)
함수->어떤기능(데이터 추가,수정,삭제,조회,계산)을 가진 최소한의 작업단위(=직원)
함수의 종류->1)내장 함수(ex alert,prompt,,) 2)사용자 정의 함수=>새로운 기능작성
함수의 기능별로 종류
1.매개변수 X , 반환값(=보고) X =>단순하고 반복적인 일을 주로 하는 경우
2.매개변수 O ,반환값 X => 데이터를 입력=>계산,저장,출력
3.매개변수 O ,반환값 O => 데이터를 입력=>계산목적,웹프로그래밍
*/
//1.매개변수 X , 반환값(=보고) X
function print1() {
document.write("단순하고 반복적인일을 주로 담당<br>");
}
//2.매개변수 O ,반환값 X
function print2(su) { //출력목적->자료형이 정해져 있지 않다.(문자 or 숫자 or 논리적인값)
//자료형(타입=>컴퓨터가 처리해야할 값의 범위(숫자,문자,논리적인값)
//String(문자) , int(숫자), boolean (논리적인값)
document.write("입력받은 값은=>" + su + "입니다.<br>");
}
function print3(su, su2) { //계산->출력
document.write("su+su2=>" + (su + su2) + "입니다.<br>");
}
//3.매개변수 O ,반환값 O =>사용범위(변수가 저장할 수 있는 영역)
function print4(su, su2) { //30,40
var result = su + su2
//형식)return 계산한 결과값(변수) or 수식(=계산식) or 객체
return result;
}
</script>
</head>
<body>
<script>
//함수호출=>업무지시
print1()
print2(30); //print2라는 함수를 호출하면서 매개변수 30을 전달
print2("자바스크립트 함수 연습");
print3(10, 20);
//반환값이 있는 함수를 호출=>형식) var 반환값저장변수=함수명(매개변수명,,,)
var hap = print4(30, 40); //함수는 호출했지만 보고X
document.write("반환받은 값(hap)=>" + hap + "<p>");
alert(print4(70, 30)) //중첩함수(함수 내부에 또 다른 함수를 호출하는 경우)
</script>
<!--
1.버튼을 클릭했을때 함수호출 or 링크문자열을 클릭했을때 함수호출
onclick="자바스크립트 구문;구문2;구문3" => "문자열 안에서는 " 사용불가->'을 사용해야 한다.
2.링크문자열을 클릭=>함수호출
<a href="#" onclick="호출할 함수명() or 호출할 함수명(~)">링크문자열</a>
-->
<input type="button" value="계산목적" onclick="alert('함수호출 연습')">
<input type="button" value="함수호출" onclick="print2(12)">
<a href="#" onclick="print2('매개변수 전달')">함수호출유형 연습</a>
</body>
</html>
2. 내장함수(prompt,alert,if문)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>내장함수(prompt,alert,if문)(2).html</title>
<!--
문장->순차문=>써진 순서대로 실행이 되는 문장
제어문=>어떤 특정한 조건에 따라서 실행 O or 실행 X 있는 문장
종류=>조건문,선택문,반복문,탈출문
형식) if문=>조건식(둘중에 하나를 체크)에 따라서 어떻게 실행?
if (조건식) =>변수,수식(계산식->논리,관계,,,)
수행1 (참)
if (조건식) =>변수,수식(계산식->논리,관계,,,)
수행1 (참)
else
수행2(거짓)
-->
</head>
<body>
<script>
/*
window.alert("경고성 문구를 출력할때 사용");
alert("두줄을 나누어서\n출력\n함"); //문자열\n문자열2,,,
형식) var 변수명=호출할 함수명(매개변수,,,)
*/
var name = prompt("당신의 이름을 입력하세요?") //매개변수 O, 반환값 O
// 관계연산자=> ==(값이 같은지 확인), !=(값이 같지 않은경우)
// null(값이 들어가 있지 않은 상태)(화면X) ,빈문자열=>""(화면 X)
if (name != "") //값을 입력을 받았다면
alert("당신의 이름은" + name + "이군요");
else //입력을 하지 않은 상태
alert("이름을 먼저 입력하세요!");
</script>
</body>
</html>
3. 내장함수(confirm)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>내장함수(confirm)(3).html</title>
</head>
<body>
<script>
/*
형식) confirm('동의를 구하는 메서지?")
*/
var result = confirm("정말로 회원탈퇴하시겠습니까?"); //매개변수 O, 반환값 O
//alert(result)//true(확인버튼) or false(취소버튼)
if (result == true) //사용자가 확인버튼을 눌렀다면
alert("당신은 정상적으로 회원탈퇴\n처리되었습니다.");
else //result==false
alert("회원탈퇴가 취소되었습니다.");
</script>
</body>
</html>
4. 다중 if문
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>다중 if문(4).html</title>
<!--
조건식에 따라서 처리할 문장이 하나 이상인 경우에 처리->실행속도가 느려진다.
if(조건식1)
수행1
else if(조건식2)
수행2
else if(조건식3)
수행3
,,,
else
수행n
-->
</head>
<body>
<script>
var qs=prompt("당신이 좋아하는 언어를 선택? 1.자바 2.자바스크립트 3.C언어");
//조건식이 한개->여러개 나오는 경우 연산자(and(&&), or ||)
if((qs=="자바") || (qs==1))
document.write("자바를 선택하셨군요!");
else if((qs=="자바스크립트") || (qs==2))
document.write("자바스크립트를 선택하셨군요!");
else //else if(qs=="C언어")
document.write("C언어를 선택하셨군요!");
</script>
</body>
</html>
5. 계산문제
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>계산문제(5).html</title>
<script>
function sum() {
//alert("sum함수 호출됨") =>합계를 구해서 출력=>total=78+34+90 alert(total)
//1. document.form이름.inputbox이름.속성명(value)
var k = document.myForm.kor.value; // "90"=>문자열 상수(숫자로 된 문자열)
var e = document.myForm.eng.value; //"80" =>숫자로 변환시켜주는 함수->parseInt()
var m = document.myForm.mat.value; //70"
var total = parseInt(k) + parseInt(e) + parseInt(m); //"90"+"80"+"70"="908070"
//var total=parseInt("90")+parseInt("80")+parseInt("70");
alert(total)
}
</script>
</head>
<body>
<form name="myForm" method="post" action="cal.jsp">
국어:<input type="text" name="kor" placeholder="국어점수 입력"><br>
영어:<input type="text" name="eng" placeholder="영어점수 입력"><br>
수학:<input type="text" name="mat" placeholder="수학점수 입력"><br>
<input type="button" value="점수출력" onclick="sum()">
<input type="reset" value="지우기" onclick="document.myForm.kor.focus()">
</form>
</body>
</html>
6. 태그의 내용을 변경
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>태그의 내용을 변경(6).html</title>
<script>
function change() {
/* 태그의 id속성->1) 스타일 적용(id 선택자) ->div#test {}
2)div태그의 정보를 얻어올 목적(=객체 정보)=>함수
document.getElementById("id값")
*/
var ch = document.getElementById("test2"); //태그의 id값이 test2인 태그정보를 가져오라
//alert(ch)//div태그 자체를 의미->[object ElementDiv~]
//alert(ch.innerHTML)//ch.innerHTML속성(태그의 내용을 얻어올때 사용하는 속성)
//변경(=수정)=>태그정보.innserHTML="변경시킬 내용을 저장"
ch.innerHTML = "화면상에 동적으로 변경되었습니다.";
}
</script>
</head>
<body>
<div id="test">자바스크립트의 변수,연산자,함수의 종류,제어문(if)</div>
<div id="test2">DOM의 개요 및 활용법</div>
<form>
<input type="button" value="변경" onclick="change()">
</form>
</body>
</html>
7. 이벤트 정리
이벤트=>운영체제가 인식가능한 사용자들의 모든 행동(키보드,마우스)+스크린터치
이벤트 발생 대상자 종류 이벤트핸들러(EventHandler)->처리할 내용을 가진 함수
1. click 마우스 클릭 on+이벤트종류명->onclick=연결시킬 함수
2. load 제일먼저 문서(html)을 읽어들일때 ->onload="?"
3. unload ->현재 사이트->다른 사이트로 이동 ->onunload(IE 적용O, chrome 적용X)
4. change->콤보박스에서 특정한 항목을 선택->발생되는 이벤트 onchange
5. mouseover->마우스를 갖다대면 발생->onmouseover
6. mouseout->특정위치에서 마우스포인터가 벗어날때->onmouseout
7. Blur->입력하는 경우(input type="text") 커서가 이동할때 발생시키는 이벤트
-> onBlur="" 커서를 다음 항목에 이동시키기전에 전의 데이터를 제대로 입력했는지 체크하고 싶을때
태그를 구분할때 -> id와 name속성(데이터 입력)을 두개 다 사용이 가능
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>이벤트 정리(7).html</title>
<!--
이벤트=>운영체제가 인식가능한 사용자들의 모든 행동(키보드,마우스)+스크린터치
이벤트 발생 대상자 종류 이벤트핸들러(EventHandler)=>처리할 내용을 가진 함수
1.click 마우스 클릭 on+이벤트종류명=>onclick=연결시킬 함수
2.load 제일먼저 문서(html)을 읽어들일때 =>onload="?"
3.unload ->현재 사이트->다른 사이트로 이동 =>onunload(IE 적용O, chrome 적용X)
4.change->콤보박스에서 특정한 항목을 선택->발생되는 이벤트 onchange
5.mouseover->마우스를 갖다대면 발생->onmouseover
6.mouseout->특정위치에서 마우스포인터가 벗어날때->onmouseout
7.Blur->입력하는 경우(input type="text") 커서가 이동할때 발생시키는 이벤트->
onBlur="" 커서를 다음 항목에 이동시키기전에 전의 데이터를 제대로 입력했는지 체크하고 싶을때
태그를 구분할때 ->id와 name속성(데이터 입력)을 두개 다 사용이 가능
-->
</head>
<body onload="alert('환영합니다.')" onunload="alert('다음에 또')">
<a href="http://www.daum.net" 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="img2">
</body>
</html>
8. 배경색을 변경
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>배경색을 변경(8).html</title>
<style>
div#box {
width: 200px;
height: 200px;
background: #ffffff;
border: 2px solid black;
}
</style>
<script>
function setRed() {
//id가 box인 div태그를 얻어와서 배경색을 red로 설정하라
var box = document.getElementById("box");
//alert(box); //[object~] style="background:red" //태그정보.속성=변경시킬 값
//형식) 태그정보.상위속성명.하위속성명=변경할값(저장할 값)
box.style.background = "#ff0000";
}
function setGreen() {
var box = document.getElementById("box");
box.style.background = "#00ff00";
}
function setBlue() {
var box = document.getElementById("box");
box.style.background = "#0000ff";
}
</script>
</head>
<body>
<input type="button" value="Red" onclick="setRed()">
<input type="button" value="Green" onclick="setGreen()">
<input type="button" value="Blue" onclick="setBlue()">
<p>
<!-- <div id="box" style="background:red"></div> -->
<div id="box"></div>
<div id="box2"></div>
</body>
</html>
appendChild(),removeChild,replaceChild,->태그 함수
setAttribute()함수, getAttribute()함수->속성에 대한 함수
document.getElementById()함수,,,
createElement()->태그를 생성하는 함수
createTextNode()->텍스트를 생성하는 함수