- JS의 반복문 예제1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//1.사용자한테 숫자 입력받아줌 시작숫자,마지막숫자 입력받음
let num1 = Number(prompt('시작할 숫자를 입력하세요'))
let num2 = Number(prompt('마지막 숫자를 입력하세요'))
//2. 시작 숫자~마지막숫자까지 합 출력
//초기 변수 선언할 때 값을 결정해주는 게 좋다. <자바스크립트는 동적인언어이기때문
let total = 0;
for(let i = num1; i<=num2; i++){
total += i;
}
console.log(num1 + '부터' + num2 +'까지의 합>> ' + total);
</script>
</body>
</html>- 반복문 예제2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//math.random() : 0~1까지의 랜덤한 실수값
//Math.floor() : 소수점이하 반올림해줌
//0~99까지인데 +1해주면 1~100까지 숫자가 나오게됨
// console.log(ranNum)
let ranNum = Math.floor(Math.random() * 100) + 1
while (true) {
let num = Number(prompt('숫자를 입력해주세요!'))
if (ranNum > num) {
alert('입력한 숫자보다 작은 수 입니다..')
} else if (ranNum < num) {
alert('입력한 숫자보다 큰 수입니다.')
} else if (ranNum == num) {
alert('정답입니다 축하합니다🎉')
break;
}
}
</script>
</body>
</html>JS의 입력방식
-
내부방식
head, body 영역 내에 script 내부방식, 현업에서는 사용하지 않음
<script></script> -
인라인방식
태그에 직접 기능을 넣어줄 때 사용
<button>마우스올리기</button>
- 외부방식
외부에서 경로를 지정해줌
<button>클릭!</button>
클릭했을 때 ck라는함수를 호출함
<script src="ex12외부.js"></script>
외부파일을 해드태그내에 지정
JS의 배열
- 배열의 형식을 따로 표기하지않음 (JS 타입을 동적으로 정의해줌)
- 데이터크기도 지정안함
- 배열 선언
let numList = []; let numList2 = new Array(5); => 하나만 적으면 크기
다섯으로 선언했지만, 추가로 데이터를 추가 할 수 있다. => 동적, 가변적 특징때문에 초과해서 추가 가능 - 배열 생성
numList = [1,2,3] numList2 = new Array(1,2,3) => 여러개는 그 안의 값 - 선언과 생성 두가지 동시 가능
let numList3 = [1,2,3,4,5] - 인덱스 활용해 데이터저장
1.반드시 배열을 선언한 후에 접근하기 =>undifined오류 발생
2.인덱스로 접근할 때 0부터 시작
let arr = []; arr[0] = '가나다' arr[1] = 1 arr[2] = true - 배열의 출력, 길이
console.log('arr배열 출력>> '+arr) console.log('arr길이 출력>> '+arr.length)
- 배열에 저장된 데이터에 접근
for(let i = 0; i<arr.length; i++){ console.log(arr[i]) }
- 배열 예제1
배열 데이터 중 가장 큰 값 출력하기
- 배열선언
- for문 이용하거나 Math함수 이용 : Math.max
-math.max() 알아서 제일 큰 수 출력 Math.max.apply(null, list) 전달해줄 값, 전달받은 값
<script>
// 배열선언
let list = [24,54,78,13,44,99];
//case1 - for문이용
//1. 가장 큰 값을 넣을 maxNum
//2. 비교할 대상을 잡아줌 list[0]
//3. for문을 이용해 계속 비교해줌
//최댓값 >> 78 콘솔창을 띄워줌
let maxNum = 0;
for(let i = 0; i<list.length; i++){
if(list[i]>maxNum){
maxNum = list[i]
}
}
//case2 - Math 이용 : Math.max
// math.max() 알아서 제일 큰 수 출력
let maxNum2 = Math.max.apply(null, list) //전달해줄 값, 전달받은 값 전달해줄 값은 없음->null
console.log('최댓값 >> ' + maxNum)
console.log('최댓값 >> ' + maxNum2)
</script>- 배열 예제2 홀수 구하고 배열에 넣기
방법 두가지
- for문 이용해서
listHole[cnt] = list[i] - 함수이용
listHole.push(list[i])
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//홀수와 홀수 개수 구하기
let list = [1, 2, 3, 4, 5, 6, 7, 8];
//홀수 판별 후 홀수만 따로 넣어줄 공간 -> 배열 생성
//list에 들어있는 홀수는 1,3,5,7이며, 총 4개입니다 출력
let listHole = [];
let cnt = 0;
for (let i = 0; i < list.length; i++) {
if (list[i] % 2 == 1) {
// listHole[cnt] = list[i]
listHole.push(list[i])
cnt++
}
}
console.log('list에 들어있는 홀수는 ' + listHole + '이며 총 ' + listHole.length + '개입니다')
</script>
</body>
</html>배열의 함수종류
- push : 배열의 맨 마지막 인덱스에 데이터를 넣어줌
- pop() : 배열의 맨 마지막 인덱스 삭제
list.pop(); - unshift() : 배열의 맨 앞 인덱스에 데이터 넣기
- shift() : 배열의 맨 앞인덱스 삭제하기
list.shift();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//배열함수
let list =[];
list.push(3);
console.log('현재 list >> ' + list)
list.push('값1')
console.log('현재 list >> ' + list)
//push : 배열의 맨 마지막 인덱스에 데이터를 넣어줌
//pop() : 배열의 맨 마지막 인덱스 삭제
list.pop();
console.log('현재 list >> ' + list)
//unshift() : 배열의 맨 앞 인덱스에 데이터 넣기
list.unshift('값2')
console.log('현재 list >> ' + list)
//shift() : 배열의 맨 앞인덱스 삭제하기
list.shift();
console.log('현재 list >> ' + list)
</script>
</body>
</html>
