본문 바로가기
WEB/JAVASCRIPT

자바스크립트 예제 및 함수

by 둥바 2022. 6. 23.
예제 1번 ) 텍스트 필드와 버튼을 통해 입력받은 단의 구구단을 HTML에 출력하기
window.event.keyCode : 키보드에 각 코드값 존재
keyCode가 13이라는 것은, enter키를 의미한다.
document.getElementById("Id값").value -> HTML 내의 ID를 통해 ID가 가진 값을 가져온다.
document.getElementById("Id값).innerHTML -> innerHTML형식으로 출력
onkeyup : 키보드가 눌러진 상태에서 떨어질 때 작동하는 이벤트 핸들러
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>gugudan3</title>
<script type="text/javascript">
function enter(){
	console.log(window.event.keyCode);
	//개발자도구 콘솔창에 출력
	//키보드에 각 코드값이 존재
	if(window.event.keyCode == 13){
		//13은 키보드의 엔터키를 의미
		gugu(); //호출
	}
}

function gugu(){
	var dan = document.getElementById("dan").value;
	var str = "";
	for(var i=1; i<=9;i++){
		str += dan + "x" + i + "=" + dan*i + "<br>";
	}
	//id가 result인 태그의 내부영역<div>에 결과를 출력할 때 (innerHTML) HTML형식으로 출력
	document.getElementById("result").innerHTML = str;

}
</script>
<style type="text/css">
#result{
 background-color: aqua;
 width:150px;
 
}
</style>

</head>
<body>
단을 입력하세요.
<!-- onkeyup: 키를 누르고 떼는 순간(키가 올라갈 때 이벤트 작동)  -->
<input type="text" id="dan" value="2" size="5" onkeyup="enter()">
<!-- value : 기본값, size : 크기  -->
<!-- onkeyup : 키보드가 눌러진 상태에서 떨어질 때 작동하는 이벤트 핸들러  -->
<input type="button" value="확인" onclick="gugu()" >
<div id="result">innerHTML영역</div>
</body>
</html>

해당 예제의 흐름을 이해하자면,

단을 입력하세요 : ___

확인버튼 

innerHTML영역(결과값 출력되는 영역)

 

으로 HTML이 짜여져있고, 실제 단에 입력하고 엔터를 누르거나 확인버튼을 누르면 단에 해당하는 결과값이 innerHTML영역에서 출력되는 흐름으로 코딩되어있다.

 

과제
입력화면과 출력화면이 아래처럼 나올 수 있도록 해보는데,입력화면에서 enterkey를 쳐도 값이 입력되도록 해보라. 자바스크립트 코드는 외부 자바 스크립트를 활용 [화면] 입력화면 memberEx.html
아이디 : 텍스트필드
비밀번호 : 텍스트필드
이름 : 텍스트필드
이메일 : 텍스트필드
전화번호 : 텍스트필드
확인버튼 ----------
출력화면 memberEx.result.jsp
[ 고 객 정 보 ]
-------------------- (테이블로 만들기)
아이디 kim
비밀번호 1234
이름 김길동
이메일 kim@gmail.com
전화번호 010-1234-5678

 

 

예제 2번 ) 자바스크립트의 위치 ( 인라인 , 내부 , 외부 )

2-1) 하나의 HTML에 자바스크립트가 포함되어 있는 경우

- <button> </button> 태그는 HTML5전용으로 제출기능이 탑재된 버튼이다.
- 그러나, <button type="button"></button>이 되면 제출기능을 상실한다.
- 간단한 경우 인라인 자바스크립트 가능
예) onclick ="alert('hi')"; //단, ""와 ''으로 구분해줄 것
- 내부 자바스크립트 호출도 가능 ( 호출한 함수를 내부 자바스크립트 단에서 정의해주어야함 )
예) onclick = "test()";
<script> 
function test(){
   실행할 문장;
}
</script>

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>인라인/내부자바스크립트</title>
<script type="text/javascript">
function test(){
	alert("Hello");
}</script>
</head>
<body>
<p>인라인 자바스크립트</p>
<!-- button 태그는 html5전용 태그(제출기능 유)  -->
<!-- button type = "button" : submit기능 상실 -->
<button type="button" onclick="alert('Hello')">
버튼을 누르세요(인라인 버튼)</button>

<button type="button" onclick="test()">
버튼을 누르세요(내부 스크립트 호출)</button>
</body>
</html>

 

2-2)  외부 자바스크립트 파일과 HTML 연결

외부 자바스크립트 파일 연결 방법
<script src=" 경로 "> </script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>외부 자바스크립트</title>
<script src="../include/myScript.js">
</script>
</head>
<body>
<button type="button" onclick="test()" >클릭(외부)</button>
</body>
</html>
function test(){
	alert("Hello");
}

 

자바스크립트 함수

 

예제 3번 ) 선언적 함수
선언적 함수
function 함수이름(){
        호출할 함수 또는 실행할 문장 등..
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dec_func</title>
</head>
<body>
<script type="text/javascript">
function printTen(){ //함수에 이름이 있는 선언적 함수 정의
	alert(10);
}

printTen(); //함수호출
</script>
</body>
</html>

 

예제 4번 ) 무명함수
무명함수 : 이름이 없는 함수
function(){
실행 문장
}; 의 형태를 가진다.

- 변수에 무명함수를 저장할 수 있고, 따라서 무명함수를 변수를 통해 재사용이 가능하다.
예) var 변수명 = funtion(){};
변수명(); //변수를 통해 무명함수 재사용
typeof(변수명) 을 확인하면, 함수가 나온다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>anno_func</title>
</head>
<body>
<script type="text/javascript">
var plusTen = function(){//익명함수(이름없음)
	var num = prompt("숫자를 입력하세요","");
	alert(Number(num)+10);//숫자로 변환하여 연산가능
};//끝에 세미콜론

alert(typeof(plusTen));//형 확인
alert(plusTen); //plusTen을 출력해봐라.
plusTen(); //변수를 통해 익명함수 호출 가능

var add = plusTen; //변수 add에 익명함수 저장 가능
add(); //변수로 익명함수 호출
</script>
</body>
</html>

 

예제 5번 ) 매개변수가 있는 함수
function 이름(매개변수){
문장
}
매개변수가 있는 경우, 매개변수의 값을 받아서 특정 값을 리턴할 수도 있지만
return; 만 있는 경우 리턴값 없이 함수가 실행되는 도중 호출한 곳을 되돌아간다.
이런 경우에는 리턴값이 없기 때문에 undefined가 출력된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>매개변수가 있는 함수1</title>
<script type="text/javascript">
function plusTen(x){
	return x+10;
}

alert(plusTen(10));
document.write(plusTen(20));

</script>
</head>
<body>

</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>매개변수 있는 함수2</title>
<script type="text/javascript">
function printTen(x){
	alert('A');
	return;//리턴값 없이 함수 실행 중 호출한 곳을 되돌아간다.
	
	
}

var out = printTen(3);//A
alert(out);//리턴받은 값이 없으므로 undefined로 출력

</script>
</head>
<body>

</body>
</html>

 

예제 7번 ) 가변인자함수
가변인자함수 : 매개변수가 함수에 정의된 것보다 많이 입력된 것만 사용
그러나 입력된 매개변수를 활용할 수 있도록 함수 구현이 가능하다.
가변인자함수의 특징
 1. 매개변수의 개수가 변할 수 있는 함수
 2. 정의된 것과 다르게 입력된 매개변수를 모두 활용할 수 있는 함수
 3. 모든 함수는 매개변수를 내장된 arguments 배열에 저장한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>argu2</title>
<script type="text/javascript">
function add(){
	var output='';
	alert(typeof(arguments));
	alert(arguments.length);
	for(var i=0;i<arguments.length;i++){
		output += arguments[i]+' ';
	}
	return output;
}

var out = add(1,2,3,4,5);
alert(out); //return output


</script>
</head>
<body>

</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>argu1</title>
<script type="text/javascript">
function add(){
	var output='';
	var sum=0;
	for(var i=0;i<arguments.length;i++){
		//입력된 매개변수의 숫자만큼 반복한다.
		output += arguments[i]+' ';
		sum += arguments[i];
	}
	output='입력된 매개변수 '+output+'를 더한 값은\n' + sum + '입니다.';
	return output;
}
var out = add(1,2,3,4,5,6,7);//자동으로 argument라는 배열에 저장된다.
alert(out);//return output


</script>
</head>
<body>

</body>
</html>
</html>

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>parameter</title>
<script type="text/javascript">
function parameter(){
	var out='';
	var length=arguments.length;
	
	if(length == 0){
		out += 'Zero';
	}else if(length == 1){
		out += 'One';
	}else{
		out += 'More';
	}
	return out;	
}

var output = parameter(1,2,3);
alert(output);


</script>

</head>
<body>

</body>
</html>

'WEB > JAVASCRIPT' 카테고리의 다른 글

가위바위보 게임 및 간이 계산기 만들기  (0) 2022.06.27
자바스크립트 예제 - 객체 (1)  (0) 2022.06.27
자바스크립트 예제 - 제어문과 배열 알아보기  (0) 2022.06.22
자바스크립트의 역사 및 기초문법  (0) 2022.06.21
이클립스 코드 어시스턴트 설치 및 설정  (0) 2022.06.21

관련글

티스토리툴바