4. 내가 좋아하는 동물들

2017. 8. 10. 14:19ㆍ하루만에 프로그래밍 끝내기/JAVASCRIPT

1. 자바스크립트는 기본적인 프로그램을 만들 수 있으며, 사용자들과의 상호작용이 가능합니다. 반복문을 이용하여 입력한 숫자를 더하거나 총점과 평균을 출력하는 프로그램들을 만들 수 있습니다.


2. 반복문(for, while)을 이용하여 1부터 10까지 더하기 프로그램을 만들어 봅니다.
   -1) 소스코드


<!DOCTYPE html>
<html lang="ko">
<head>
 <meta charset="UTF-8">
 <title>내가 좋아하는 동물들</title>
</head>
<body>
 <script type="text/javascript">
  var count = 0;
  var sum = 0;
  for(count=0; count<11; count++) {
   sum += count;
  }
  document.write("1부터 10까지 합은 "+sum+" 입니다.");
 </script>
</body>
</html>
 


   -2) 실행결과


3. 반복문을 이용하여 동물 이름을 출력하는 프로그램을 만들어 봅니다. 동물 이름을 출력하려면 초기에 동물 이름을 입력해 두어야 합니다. 변수를 여러 개 사용하면 되지만 변수가 수십 개가 되면 비효율적이므로 '배열'이라는 것을 사용해서 입력합니다. 배열은 하나의 변수에 여러 개의 값을 배정할 수 있게 해 줍니다. 일반적으로 배열을 선언하는 방법은 다음과 같이 2가지가 있습니다.

 
var newArray = ["lion", "tiger", "snake"];
var newArray = new Array("lion", "tiger", "snake");


   -1) 소스코드


<!DOCTYPE html>
<html lang="ko">
<head>
 <meta charset="UTF-8">
 <title>내가 좋아하는 동물들</title>
</head>
<body>
 <script type="text/javascript">
  var aniName = ["사자","호랑이","뱀","코끼리"];
  for(var i=0; i<aniName; i++) {
   document.write("동물 목록"+i+" : "+aniName[i]+"<br>");
  }
 </script>
</body>
</html>
 


   -2) 실행결과

4. 반복문을 이용하여 동물 목록을 출력해 봅니다.
   -1) 소스코드


<!DOCTYPE html>
<html lang="ko">
<head>
 <meta charset="UTF-8">
 <title>내가 좋아하는 동물들</title>
</head>
<body>
 <script type="text/javascript">
  var aniName = ["사자","호랑이","뱀","코끼리","홍학","코뿔소","앵무새"];
  for(var i=0; i<aniName.length; i++) {
   document.write("동물 목록"+i+" : "+aniName[i]+"<br>");
  }
  alert(aniName.indexOf("뱀"));
 </script>
</body>
</html>
 


   -2) 실행결과

 

5. 배열과 조건문을 이용하여 동물 이름을 검색하여 찾는 프로그램을 만들어 봅니다.
   -1) 소스코드


<!DOCTYPE html>
<html lang="ko">
<head>
 <meta charset="UTF-8">
 <title>내가 좋아하는 동물들</title>
</head>
<body>
 <script type="text/javascript">
  var aniName = ["사자","호랑이","뱀","코끼리","홍학","코뿔소","앵무새"];
  var findName = prompt("검색하고 싶은 동물 이름을 입력해 보세요","");
  if(aniName.indexOf(findName) == -1) {
   document.write(findName + "(은)는 목록에 없습니다.");
  }
  else {
   document.write(findName + "(은)는 목록에 있습니다."); 
  }
 </script>
</body>
</html>
 


   -2) 실행결과

 

*주의사항*


인터넷 익스플로러 7, 8버전에서는 indexOf를 지원하지 않기 때문에 다른 방법을 사용해야 합니다. 이 블로그의 내용은 인터넷익스플로러 10이상에서 확인하기를 권장합니다.
 

저작자표시 비영리 동일조건

'하루만에 프로그래밍 끝내기 > JAVASCRIPT' 카테고리의 다른 글

6. 퀴즈 프로그램 만들기  (3) 2017.08.21
5. 함수 만들기  (0) 2017.08.11
3. 음식 주문하기  (0) 2017.08.09
2. 사칙연산하기  (0) 2017.08.09
1. 자바스크립트 시작하기  (0) 2017.08.09

관련글

댓글 0

티스토리툴바