본문 바로가기
WEB/JAVASCRIPT

자바스크립트 예제 - 제어문과 배열 알아보기

by 둥바 2022. 6. 22.
예제 1번 ) 문자열 변수 출력
document.writeln(), document.write()는 브라우저에 출력되나, 줄바꿈 불가하므로 <br>태그 이용해야함
toUpperCase() 대문자로, toLowerCase() 소문자로
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>var_str</title>
<script type="text/javascript">
var s = "Hello world";
var t = "How are you " + "today";//문자열 연결
document.writeln(s);//줄바꿈 안된다.
document.writeln(t);
document.write(s+"<br>"); //<br>태그로 줄바꿈
//대문자 변환:toUpperCase()
document.write(s.toUpperCase()+"<br>");
//소문자 변환:toLowerCase()
document.write(s.toLowerCase()+"<br>");

</script>
</head>
<body>

</body>
</html>

 

예제 2번 ) 자바스크립트의 데이터 타입 및 경고창
typeof(x) : x의 데이터 타입 반환
자바스크립트는 유연하기 때문에, ' ' 와 " " 를 구분하지 않고 문자열에 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>typeof_test</title>
<script type="text/javascript">
var x1 = '김철수';
//문자열 - 작은 따옴표, 큰 따옴표 무관 (유연)
var x2 = 99;
var x3 = true;
var x4; //선언

alert(typeof(x1)); //경고창
alert(typeof(x2));
alert(typeof(x3));
alert(typeof(x4));
	
	
	
</script>
</head>
<body>

</body>
</html>

 

예제 3번 ) 닫기 버튼 만들기
함수 정의 : function 함수명() { 실행할 문장 }
self.close(); 자기 자신의 창을 닫는 기능
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>close_button</title>
<script type="text/javascript">
//함수 정의
function winClose(){
	self.close(); //자기 창 닫는 기능
}

</script>
</head>
<body>
	<input type="button" value="닫기" onclick="winClose()">
</body>
</html>

 

IF문
예제 4번 ) IF문과 대화상자, 형 변환
<자바스크립트의 대화상자>
alert(메시지) : 단순 경고창
prompt(메시지,기본값) : 입력 대화상자
confirm(메시지) : 사용자의 확인을 받는 대화상자

<자바스크립트 문자열 ->숫자로 형 변환>
Number("문자열");
parseInt("문자열");

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ifex1</title>
<script type="text/javascript">
var number = prompt("숫자 입력하라.", "");
//prompt는 문자열이 들어오기 때문에, 숫자 처리를 위해서는 형 변환 필요
number = parseInt(number);

if(number %2 == 0){
	alert("짝수");
}

if(number %2 == 1){
	alert("홀수");
}
</script>
</head>
<body>

</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ifex2</title>
<script type="text/javascript">
var age = prompt("당신의 나이는?", "");
age = Number(age);
//숫자로 변환 Number(String)

if(age < 20){
	alert("미성년자");
}else{
	alert("성인");
}
</script>
</head>
<body>

</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>confirm</title>
<script type="text/javascript">
var user = confirm("계속 하겠습니까?");
if(user == true){
	document.write("확인 버튼 누름");
}else{
	document.write("취소 버튼 누름");
}
</script>
</head>
<body>

</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>parse1</title>
<script type="text/javascript">
var x,y;

x = prompt("정수를 입력하세요", 10);
x = parseInt(x); //숫자로 변환
y = prompt('정수를 입력하세요.', 20);
y = parseInt(y);

document.write(x+y+"<br>");//연산가능


</script>
</head>
<body>

</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ifex3</title>
<script type="text/javascript">
var num1 = prompt("첫번째 수를 입력하라.","");
var num2 = prompt('두번째 수를 입력하라.','');

num1 = Number(num1);
num2 = parseInt(num2);

if(num1 > num2){
	alert(num1 + '>' + num2);
}else if(num1 == num2){
	alert(num1 + '=' + num2);
}else{
	alert(num1 + '<' + num2);
}


</script>
</head>
<body>

</body>
</html>

 

세 가지 대화상자 모두 쓴 예제 )

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>diaEx.html</title>
<script type="text/javascript">
while(true){
	var name = prompt("이름을 입력하세요", "홍길동");
	alert(name);
	
	var go = confirm("계속 하시겠습니까?");
	if(go == true){
		alert("진행합니다.");
	}else{
		alert("진행을 멈춥니다.");
		break;
	}
}
</script>
</head>
<body>

</body>
</html>

 

삼항연산자 활용)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>condition.html</title>
<script type="text/javascript">
var number = prompt('정수입력', '');
//1이면 true이고 0이면 false인 점을 이용하여
number % 2 ? alert("홀수") : alert("짝수");

</script>
</head>
<body>

</body>
</html>

 

 

switch case문
예제 5번 : switch case문 활용하여 날짜 나타내기
var 변수명 = new Date(); // 날짜 객체 생성
변수명.getDate(); 일 반환
변수명.getMonth()+1; 월 반환
변수명.getFullYear(); 연 반환
변수명.getDay(); 요일 반환(0~6까지, 일요일~토요일)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Date</title>
<script type="text/javascript">
var today = new Date(); //날짜 객체 생성
var dd = today.getDate();//일 
var mm = today.getMonth()+1; //월
var yy = today.getFullYear();
var yoil = today.getDay();//요일, 숫자

switch (yoil) {
case 0:
	yoil = "일요일";
	break;
case 1:
	yoil = "월요일";
	break;
case 2:
	yoil = "화요일";
	break;
case 3:
	yoil = "수요일";
	break;
case 4:
	yoil = "목요일";
	break;
case 5:
	yoil = "금요일";
	break;
case 6:
	yoil = "토요일";
	break;

}

alert(yy+"년"+mm+"월"+dd+'일'+yoil);


</script>
</head>
<body>

</body>
</html>

 

예제 6번 : switch case문 + 이미지 활용하여 계절 나타내기
Javascript 안에서 자유롭게 html 태그를 사용할 수 있으나, 구분을 위해서 " "와 ' ' 로 나누어 사용
이미지 경로를 변수화해서 사용할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>season</title>
<script type="text/javascript">
var season = prompt("계절 입력", "봄");
var msg = '';
var img = '';
switch (season) {
case "봄":
	msg = "봄을 좋아하시네요.";
	img = "spring.jpg"
	break;
case "여름":
	msg = "여름을 좋아하시네요.";
	img = "summer.jpg"
	break;
case "가을":
	msg = "가을을 좋아하시네요.";
	img = "autumn.jpg"
	break;
case "겨울":
	msg = "겨울을 좋아하시네요.";
	img = "winter.jpg"
	break;

default:
	msg = "잘못 입력하셨습니다.계절 입력하세요.";
	//break없어도 되고 있어도 된다.
}
//javaScript안에서 html태그 자유롭게 작업가능
document.write('<h2>'+msg+'</h2>');
document.write('<img src="../image/' + img + '">');
//안의 " "를 ' ' 로 변환, 경로 변수화, 막는태그 

</script>
</head>
<body bgcolor="lightblue">

</body>
</html>

 

for문
예제 7번 : for문 활용 계산( 합산 및 구구단 + HTML태그 이용해서 테이블로 )
html태그와 for문을 적절히 활용할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>forEx1</title>
<script type="text/javascript">
var num = prompt("숫자를 입력하세요.", "100");
var sum = 0;
for(i=1;i<=num;i++){
	sum = sum+i;
}
document.write('합계:'+sum);


</script>
</head>
<body>

</body>
</html>

 

구구단)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>99dan</title>
<script type="text/javascript">
var dan = prompt("단을 입력하세요.(2~9)", "2");
document.write("<h2>"+dan+"단</h2>");
for(i=1;i<=9;i++){
	document.write(dan+"x"+i+"="+dan*i+"<br>");
}



</script>
</head>
<body>

</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>gugudan</title>
<script type="text/javascript">
for(var i=2;i<=9;i++){
	document.write("<h1>"+i+"단</h1>");
	for(var k=1;k<=9;k++){
		document.write(i+"x"+k+"="+i*k+"<br>");
	}
}
</script>
</head>
<body>

</body>
</html>

 

테이블 )

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table_temp</title>
<script type="text/javascript">
document.write("<table border='1'>");
document.write("<tr>");
document.write("<td>섭씨온도</td>");
document.write("<td>화씨온도</td>");
document.write("</tr>");

for(i=0;i<=50;i++){
	document.write("<tr><td>"+i+"</td>");
	document.write("<td>"+((i*9.0/5)+32)+"</td></tr>");
}
document.write("</table>")

</script>
</head>
<body>

</body>
</html>

 

구구단 테이블(과제)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
document.write("<table border='2'>");
document.write("<caption>구구단</caption>");
document.write("<tr>");
for(var i=2;i<=9;i++){
	document.write("<td>"+i+"</td>");
	for(k=1;k<=9;k++){
		document.write("<td>"+i+"x"+k+"="+i*k+"</td>");
		
	}
	document.write("</tr>");
}

document.write("</table>");
</script>
</head>
<body>

</body>
</html>

 

배열
예제 8번 : 자바스크립트 배열 활용
var 배열명 = [ 배열요소,배열요소,배열요소,배열요소 ...]
var 배열명 = new Array(); //배열 선언
var 배열명[인덱스] : 인덱스에 들어있는 값
 -> 이 때, 자바스크립트는 자바와 달리 숫자 외에도 문자를 인덱스로 지정할 수 있다.
 -> 문자로 지정된 인덱스를 통해 값을 꺼낼 때 향상된 for문을 활용한다.
for( var 개별변수 in 집합변수) {
document.write(집합변수[개별변수]+"<br>");
}
배열명.length : 배열의 길이
배열명.push(값) : 배열 증가(값을 넣음)
배열명.pop() : 배열 감소
배열명[배열명.length] = 값; 값 하나 추가
var 배열명 = new Array(); 처럼 배열을 선언하고, 인덱스에 값을 넣지 않으면 undefined 되어 있음.
예) 배열명[0] = 1;
배열명[3] = 3;
이 때, 배열을 출력한다면 1, , ,3 이 출력된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>array1</title>
<script type="text/javascript">
var array1 = [1,2,3,4,5];
var array2 = ['a','b','c','d'];

alert(array1[0]);//1
alert(array2[3]);//d
alert(array2[1]+array2[3]);//bd

alert(array1);//1,2,3,4,5
alert(array1.length);//5(배열의 길이)

</script>
</head>
<body>

</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>array2</title>
<script type="text/javascript">
var fruits = new Array(); //배열선언
fruits[0] = "사과";
fruits[1] = "배";
fruits[2] = "감";

for(i=0;i<fruits.length;i++){
	document.write(fruits[i]+"<br>");
}

document.write("===================="+"<br>");
//자바와는 달리 자바스크립트는 숫자 인덱스 외에 문자열 인덱스도 사용가능
var textFruits = new Array();
textFruits['a'] = "딸기";
textFruits['b'] = "포도";
textFruits['c'] = "오렌지";

//향상된 for문(개별변수 f, in 집합변수)
for(var f in textFruits){
	document.write(textFruits[f]+"<br>");
}


</script>
</head>
<body>

</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Array_length</title>
<script type="text/javascript">
var array1 = []; //배열 데이터타입
array1[0] = 1;
array1[3] = 4;
array1[5] = 5;

alert(array1);//1, , ,4, ,5
alert(array1[1]); //undefined
alert(array1.length); //6
</script>
</head>
<body>

</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>push_pop</title>
<script type="text/javascript">
var array1 = [1,2,3,4,5];

alert(array1.length);//5

array1[array1.length]=6; //array1[5]=6;
alert(array1);//1,2,3,4,5

array1.push(7); //push()함수 : 배열 증가
alert(array1);//1,2,3,4,5,6,7

array1.pop(); //pop()함수: 배열 감소
alert(array1);//1,2,3,4,5,6

array1[0] = 8;
alert(array1); //8,2,3,4,5,6

var array2 = new Array();
array2[0] = 1;
array2[2] = 4;
array2[5] = 7;
array2[array2.length] = 8;
array2.push(0);
array2.push(5);
array2.pop();
alert(array2); //1, ,4, , ,7,8,0
document.write(array2.length);


</script>
</head>
<body>

</body>

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

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

관련글

티스토리툴바