반복문
어떤 조건을 만족할 때까지 같은 처리를 반복하여 실행하는 구문
반복문(for)
작성코드
<!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. 시작 숫자, 마지막 숫자 입력 받는다.
// 2. 시작~마지막 숫자 합을 구한다.
// 3. 형식에 맞춰서 출력해준다. -> 콘솔창
let num1 = Number(prompt('시작할 숫자를 입력하시오.'));
let num2 = Number(prompt('마지막 숫자를 입력하시오.'));
console.log(num1);
console.log(num2);
let sum = 0;
for(let i = num1; i <= num2; i++){
// 값을 누적해서 더해준다.
// 복합대입연산자 : +=, 증감연산자 : ++ --
sum += i;
}
// console.log(sum);
// 백틱
console.log(`${num1}부터 ${num2}까지의 합은? >> ${sum}`);
</script>
</body>
</html>
실행결과
반복문 실습 (while)
작성코드
<!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. 랜덤한 수를 뽑아준다.
// 2. 사용자에게 숫자를 입력받는다.
// 2-1. 숫자 > 랜덤 '입력한 숫자보다 작은 수 입니다.'
// 2-2. 숫자 < 랜덤 '입력한 숫자보다 큰 수 입니다.'
// 2-3. 숫자 = 랜덤 '정답입니다. 축하합니다 😜😜😜'
// 랜덤 숫자 뽑는 방법 : Math.random() -> 0~1 사이의 난수 생성
// x 100 -> 정수화 -> +1
// 0.00000몇도 나올 수 있기 때문에 +1을 해준다
let randomNum = parseInt(Math.random()*100)+1;
console.log(randomNum);
while (true) {
let inputNum = Number(prompt('숫자를 입력하세요.'));
if (inputNum > randomNum) {
alert('입력한 숫자보다 작은 수 입니다.');
}else if (inputNum < randomNum) {
alert('입력한 숫자보다 큰 수 입니다.')
}else{
alert('정답입니다. 축하합니다 😜😜😜');
break;
}
}
</script>
</body>
</html>
실행결과
JavaScript 작성 위치
작성코드
<!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>
<!-- 외부 방식
외부의 JS 파일 안에 작성 후 연결 -->
<script src="./ex15외부js.js"></script>
</head>
<body>
<!-- 내부방식
HTML 문서 내 script 태그 안쪽에 직접 작성 -->
<script>
console.log('내부 방식');
</script>
<button onmouseenter="alert('마우스를 올렸습니다!')">마우스 올림</button>
<br><br>
<button onclick="clickFunc()">마우스 클릭</button>
</body>
</html>
ex15외부.js
// 바로 JS 문법 작성이 가능하다.
console.log('work');
function clickFunc() {
alert('마우스로 클릭했습니다! 🐱🐉')
}
실행결과
배열(Array)
수많은 데이터 중에서 연관된 데이터를 하나로 담아두는 공간
** 인덱스!
배열에 접근
배열예제
작성코드
<!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 numList = [];
// 새로운 배열 객체 생성 크기 지정 / 크기는 변함
let numList2 = new Array(5);
// 2. 배열의 생성
numList = [1,2,3];
console.log(numList2);
numList2 = [1,2,3,4,5,6];
console.log(numList2);
// 3. 인덱스를 활용
let numList3 = [];
numList3[0] = 1;
numList3[1] = '홍길동';
numList3[2] = true;
console.log(numList3);
// 배열의 길이 : 배열이름.length
console.log(numList3.length);
for(let i = 0; i < numList3.length; i++){
console.log(numList3[i]);
}
</script>
</body>
</html>
실행결과
배열 실습 - 배열에 있는 숫자 데이터 중 최댓값 구하기
작성코드
<!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. 23, 54, 78, 13, 44를 값으로 갖는 배열 생성
// 2. 최댓값 찾기
// 3. 출력하기
let numList = [23, 54, 78, 13, 44];
let maxn = numList[0];
for (let i = 0; i < numList.length; i++) {
if(maxn < numList[i]){
maxn = numList[i];
}
}
alert(`최댓값 >> ${maxn}`);
</script>
</body>
</html>
실행결과
배열관련 함수
작성코드
<!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 nameList = ['김보람','서주연','박창균','김용훈','장민혁'];
console.log(nameList);
// 1. 배열의 맨 마지막 인덱스에 데이터 추가 : push()
nameList.push('안지은');
console.log('마지막 데이터 추가', nameList);
// 2. 배열의 맨 마지막 인덱스 데이터 삭제 : pop()
nameList.pop();
console.log('마지막 데이터 삭제', nameList);
// 3. 배열의 첫 인덱스에 데이터 추가 : unshift()
nameList.unshift('서승현');
console.log('첫번째 인덱스 데이터 추가', nameList);
// 4. 배열의 첫 인덱스에 데이터 삭제 : shift()
nameList.shift();
console.log('첫번째 인덱스 데이터 삭제', nameList);
// 5. 내가 원하는 위치 데이터 추가 또는 삭제 : splice()
// 변경을 시작할 인덱스, 삭제할 데이터 개수, 추가할 데이터
// 5-1. 추가 -> 삭제할 데이터 개수 : 0
nameList.splice(1,0,'인교진')
console.log('데이터 추가', nameList);
// 5-2. 삭제 -> 추가할 데이터 : 생략
nameList.splice(2,1);
console.log('데이터 삭제', nameList);
</script>
</body>
</html>
실행결과
splice
'수업 > JavaScript' 카테고리의 다른 글
| [JavaScript] 3일차 - 함수(function), (0) | 2023.03.15 |
|---|---|
| [JavaScript] 1일 차 - JS (JavaScript)란? Java 와 JavaScript의 차이점, 출력, 입력, 변수, 자료형, 형변환, 연산자, 조건문 (0) | 2023.03.13 |