# 1. JavaScript 1일차(230918) [국비교육]

brand_mins·2023년 9월 18일

목록 보기

1/11

1. 자바스크립트 기초

프로그램 언어
웹브라우저 안에 동작하는 프로그램 언어
web 3요소는 html, css, js이고 구조와 내용, 모양, 움직임 표현
자바스크립트는 표현식으로 이루어짐.
표현식 의미를 가진 가장 작은 코드: 11, +, 'hi', var, if

var a = 10;
console.log('helloworld');

키워드: 문법으로 사용되는 약속된 문자열.
자바스크립트를 사용하려면 html태그 안에서 script태그를 내부에 기술.

(1) 화면에 출력하는 3가지 방법

document.write("hello world");

document 부분에 "hello world" 출력
- 주의: 로딩이 끝난 후 document.write를 실행하면 기존 화면 지워짐

alert("hello world");

브라우저에서 제공되는 메시지박스를 이용해서 출력

console.log("hello world");

디버그창에 출력한다

<코드 예>

<script>
  document.write("hello world");
  document.write("hello world");
  alert("hello world");
  console.log("hello world");
  alert("hello world");
</script>

(2) 파일위치

내장형: head태그 안에 script태그 기술
인라인형: 태그 속성의 값으로 기술할때 사용함
외장형: alert.js 파일을 외부에 만들고 자바스크립트 기술

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 외장형(권장) -->
  <script src="alert.js"></script>
  <script>
    alert("내장형");
  </script>
</head>
<body>
  <button onclick="alert('인라인형');">클릭</button>
</body>
</html>

alert("외장형1");
alert("외장형2");

2. 상수, 변수 그리고 자료형

자료형은 미리 만들어 놓은 데이터의 자료 형태
자바스크립트에서 변수는 자료형 관계없이 var 키워드 사용

예1. 
var a = 10; a에 정수데이터 저장. a는 number
var b = "안녕하세요" b에 문자열 데이터 저장. b는 String

예2.
a = 10; a에 10이 들어가 document.write(10) 출력시 10 출력
a = "hello"이라 입력하면 a값을 찍으면 hello 출력. a 자료형 String

(1) 자료형

typeof은 다음에 오는 자료형이 어떤 자료형인지 문자열 생성.

1. 숫자형(number)
document.write(10, typeof(10), "<br>"); // 10number
document.write(10.1, typeof(10.1), "<br>"); // 10.1 number
var myNum = 10;
document.write(myNum, typeof(myNum), "<br>"); // 10 number

2. 논리형(boolean)
- true와 false 두 가지 값을 가지는 자료형
var myBoolean = true;
document.write(myBoolean, typeof(myBoolean), "<br>"); // true boolean
var myBoolean = false;
document.write(myBoolean, typeof(myBoolean), "<br>"); // false boolean

3. 문자열(String)
- 작은 따옴표 또는 큰 따옴표로 묶어서 표현
var myString = "hello";
document.write(myString, typeof(myString), "<br>"); // hello String

4. 배열(Array)
- 여러 값을 하나의 변수에 저장하는 자료형
- 대괄호 [] 정의. 각 요소 쉼표
* 주의) 자바에서는 배열 사용시 요소는 중괄호에 묶어야 함.
var myArray = ["A","B","C"];
document.write(myArray[0], "<br>"); // A
myArray[0] = "D";
document.write(myArray[0], "<br>"); // D
document.write(myArray, "<br>"); // [D, B, C]

5. 객체(Object)
- 키-값 쌍으로 구성된 복합 자료형. 중괄호 사용하여 정의
* 주의) 자바에서 키-값 쌍으로 구성된 자료구조는 HashMap이 있다.
var myPerson = {
  firstName = "John",
  age: 40,
  eyeColor: "blue"
};
document.write(myPerson.firstName, myPerson.age, myPerson.eyeColor, "<br>"); // John 40 blue
myPerson.age = 50;
document.write(myPerson.firstName, myPerson.age, myPerson.eyeColor, "<br>"); // John 50 blue

6. 함수(Function)
- 기능을 수행하는 코드 블록 정의하고 재사용할 수 있도록 만든 자료형
var myFunction = fuction() {
  alert('hello');
};
document.write(myFunction, typeof(myFunction)); // function
myFinction(); // 'hello' 알림이 켜짐

7. 기타사항
undefined: 자료형이 결정되지 않고 값이 할당되지 않은 상태
var a;
document.write(a, typeof(a), "<br>"); // undefined

null: 값이 할당되지 않았지만 자료형이 object인 특수한 상태
document.write(b, typeof(b)); // null

(2) 자료형 코드 예시

<script>
var a = 1;
var a = 2;
document.write(a);
document.write(10 / 6, "<br>"); // 실수 처리 // 1.6666667
documnet.write(10 / 2); // 5 출력

// 자바스크립트에서 \n은 줄바꿈, \t: 탭, \"은 "를 문자열 출력 의미.
// 브라우저에서 적용되지 않고 alert에서는 적용됨.
document.write('안\n 녕\n hello" <br>');

// + 연산은 앞에서 2개씩 실행. 둘중에 하나라도 문자열이면 문자열로 변경
document.write("11+22+33", "<br>"); // 11+22+33
document.write(11 + 22 + "33"); // 3333
document.write("11" + 22 + 33); // 112233
document.write("11" + "22" + "33", "<br>"); //112233
document.write("11" + "22" + "33", "<br>"); // 112233

// boolean은 연산되면 true는 1, false는 0
document.write(true + 1, "<br>"); // 2
document.write(false + 1, "<br>"); // 1
document.write(true + "1" + "<br>"); // true1

// true, false개념 0이면 false, 1이면 true
document.write(!!0,"<br>"); // false
document.write(10,"<br>"); 10
document.write(Boolean(10), "<br>"); // true
document.write(!!10,"<br>"); // true
</script>

3. 다양한 연산자

(1) 산술연산자

수학적 계산을 실행하는 연산

var addition = 5+3; // 5+3 = 8
var subtraction = 10 - 4; // 10-4 = 6
var multiplication = 6 * 2; // 6*2 = 12
var division = 20 / 4; // 20/4 = 5
var modulus = 17 % 5; // 17%5 = 2
var exponentiation = 2 ** 3; // 2^3 = 8

(2) 할당연산자

기존 값을 할당하는 연산

var x = 10;
x +=  5; // x = x+5 = 15
var y = 20;
y -= 8; // y = y - 8 = 12
var z = 30;
z *= 2; // z = z * 2 = 60
var a = 40;
a /= 4; // a = a / 4 = 10

(3) 비교연산자

두 개의 값을 비교하여 조건의 참 또는 거짓을 판단

var x = 15;
var y = 10;

var isEqual = x==y; // false
var isNotEqual = x!=y; // true
var isStrictEqual = x === 15; // true
var isNotStrictEqual = y !== '12'; // true
var isGreater = x > y; // true
var isLess = x < y; // false
var isGreaterOrEqual = x >= y; // true
var isLessOrEqual = y <= 12; // true

* 메모 *
isEqual(==), isStrictEqual(===)차이
- isEqual(==)은 값이 같은지 비교하는 동등연산자
- isStrictEqual(===)은 값과 타입이 모두 같은지 비교(일치 연산자)
- isNotStrictEqual(!==)은 값 또는 타입이 다른지 비교

(4) 논리연산자

true나 false값을 가지고 연산하는 연산자
2개의 boolean 자료형을 연산해서 하나의 결과 얻음

&& : 논리적 and
|| : 논리적 or
! : 논리적 not

var condition1 = true;
var condition2 = false;
var logicalAnd = condition1 && condition2; // false
var logicalOr = condition1 || condition2; // true
var logicalNot = !condition1; // false

(5) 삼항연산자

var age = 18;
var isAdult = age >=18 ? '성인' : '미성년자'; // 성인

(6) 증감연산자

증감연산자는 변수의 값을 1만큼 증가시키거나 감소하는데 사용함.

전치연산(++count, --count)
var a = 5;
var b = ++a; // a값 먼저 1 증가 후 b에 6할당

후치연산(count++, count--)
var x = 10;
var y = x--; // x값이 10이면서 y에 먼저 할당 후 x값을 1씩 감소하여 9가 된다.

(7) 연산자 코드예시

1. 관계연산자, 비교연산자
document.write(50>60, "<br>"); // false
document.write(11 == '11', "<br>"); // true
document.write(11 === '11', "<br>"); // false
document.write(11 != "11", "<br>"); // false
document.write(11 !== '11', "<br>"); // true
document.write(7>6>5, "<br>"); // false
document.write(''==false,"<br>");//true
document.write(''==0,"<br>");//true
document.write(''===false,"<br>");//false
document.write(''===0,"<br>");//false

코드 설명
1. 50 > 60: false.
2. 11 == '11' 은 값은 같아 true
3. 11 === '11'은 값과 데이터 유형이 일치. 11은 숫자타입, '11'은 문자타입. 따라서 false
4. 11 != '11'은 값만 비교. 따라서 false
5. 11 !== '11' 값과 데이터 유형 일치. 따라서, true
6. 7>6>5는 체인된 비교연산자. 7>6 평가: true. 
true는 1로 간주하므로 true > 5는 false
7. '' == false: 비어있는 문자열과 false 비교. 비어있는 문자와 false는 둘다 false로 간주하여 true.
8. '' == 0: 비어있는 문자열과 0 비교. 비어있는 문자열은 숫자 0으로 변환. 0 == 0 true
9. '' === false: 비어있는 문자열과 false를 엄격하게 비교. 데이터 형변환이 없어 직접 비교하기에 false.
10. '' === 0. 이것도 데이터 타입이 다르기 때문에 false

str = "";
document.write(str != 0, "<br>"); // false
document.write(str !==0, "<br>"); // true

str = "0";
document.write(str != 0, "<br>"); // false
document.write(str !== 0, "<br>"); // true

document.write(1>2 && 3>4, "<br>"); // false
document.write(1 == 2 || 1 != 2, "<br>"); // true

2. 산술연산자
var a = 10;
var b = 20;
document.write(a+b, "<br>"); // 10+20 = 30
document.write(b*3, "<br>"); // 20*3 = 60
document.write(10 % 3, "<br>"); // 10%3 = 1

3. 조건연산자, 증감연산자
var a = (10>20) ? 10:20;
document.write(a); // 20

var a = 0;
a++;
document.write(a); // a인 0값 출력, 이후 a를 1씩 증가
a--;
document.write(a); // a인 1값 출력, 위 코드 a값이 1이기에 1씩 감소하여 0
++a;
document.write(a); // a값이 0이기에 1씩 증가하여 1값이 출력
--a;
document.write(a); // a값이 1이기에 1씩 감소하여 0 출력

document.write(a++); // 화면 출력: 0, a:1
document.write(a); // 1
document.write(++a); // 2
document.write(a); // 2

4. 대입연산 및 연산자 우선순위
a = 10;
a += 10; // a = 20
a -= 10; // a = 10

document.write(5>6 == 7>8, "==연산자보다 비교 연산자가 우선순위가 높다<br>");
- 5>6 : false, 7>8 : false, false == false는 true
document.write(5==6 && 7>8, "논리연산자가 비교연산자보다 우선순위가 낮다.<br>");
- 5==6 false, 7>8 false, false && false : false

4. 내장함수

내장함수는 전문 프로그래머가 미리 만들어 놓은 코드를 사용함
document.write() : 브라우저에 출력하는 메소드
console.log(): 콘솔창에 출력하는 메소드

(1) prompt()

입력창을 통해 사용자 입력을 받을 수 있다.
사용자 입력을 할 수 있도록 팝업이 뜬다. 원하는 성적을 입력하고 프로그램을 진행하면 사용자 입력을 프로그램 안에서 진행 가능

(2) alert()

문자열을 팝업으로 출력

(3) confirm()

true, false로 선택해서 둘중 하나의 결과를 만듬

(4) prompt, alert, confirm 활용한 프로그램

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var result = prompt("성적은?", "여기입력");
      document.write(result, "<br>");
      document.write(result + 10, "<br>");
      document.write(typeof result, "<br>");

      result = Number(result);
      document.write(result + 10, "<br>");
      document.write(typeof result, "<br>");

      var result = "14.5";
      document.write(Number(result), "<br>");
      document.write(parseFloat(result), "<br>");
      document.write(parseInt(result), "<br>");
      document.write(String(result), "<br>");

      var result = "14.5원";
      document.write(Number(result), "<br>");
      document.write(parseFloat(result), "<br>");
      document.write(parseInt(result), "<br>");
      document.write(String(result), "<br>");

      var word = window.confirm("true or false") ? true : false;
      document.write(word, "<br>");

      // toFixed: 실수를 소수점 n자리로 반올림
      var number = 3.14159265;
      // 소수점 두 자리로 반올림한 문자열 "3.14";
      var roundedNumber = number.toFixed(2);
    </script>
  </body>
</html>

+ 코드 설명 +
1. prompt 함수를 사용하여 사용자에게 성적을 입력하라는 팝업으로 표시. 사용자가 입력한 값 result 반환

2. documemt.write(result, "<br>"): 사용자가 입력한 성적인 result를 화면에 출력하고 줄바꿈

3. document.write(result + 10,"<br>")
입력한 성적에 10을 더한 결과를 출력. 이때, result 문자열 형태로 저장. 숫자10이 문자열로 연결

4. document.write(typeof result, "<br>");
'result'변수의 데이터 유형 확인하고 출력.

5. result = Number(result)
result 변수에 저장된 값을 숫자로 변환.

6. var result = '14.5원'
숫자와 문자가 혼합된 문자열이기에 변환실패. 따라서 NaN(Not a Number) 출력

7. var word = window.confirm("true or false") ? true:false
사용자에게 true 또는 false 선택하도록 확인 대화상자 표시.
사용자 선택에 따라 word 변수에 true 또는 false

(5) 연습문제

복습용도로 사용하기
p.19 참고하기.

1. 사용자로부터 2개의 정수를 받아서 첫 번째 정수를 두 번째 정수로 나누었을 때의 몫과
나머지를 계산하는 프로그램을 작성하라.
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var input1 = parseInt(prompt('첫번째 정수를 입력하세요:'));
      var input2 = parseInt(prompt('두번째 정수를 입력하세요:'));
      var quotient = Math.floor(input1 / input2);
      var remainder = input1 % input2;
      alert('몫은 ' + quotient + '나머지는 ' + remainder);
    </script>
  </body>
</html>

2.사용자로부터 하나의 정수를 받아서 정수의 세제곱 값을 계산하여 출력하는 프로그램을 작성하라.
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var input = parseInt(prompt('정수를 입력하세요:'));
      var result = input * input * input;
      alert(input + '의 세제곱 값은 ' + result + '입니다.');
    </script>
  </body>
</html>

3.사용자로부터 3개의 정수를 받아서 변수 x, y, z에 저장하고 다음 수식 (x * y - z)의 결과를 출력하는 프로그램을 작성하라.
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var x = parseInt(prompt('첫번째 정수를 입력하세요:'));
      var y = parseInt(prompt('두번째 정수를 입력하세요:'));
      var z = parseInt(prompt('세번째 정수를 입력하세요:'));
      var result = x * y - z;
      alert('결과는 ' + result + '입니다.');
    </script>
  </body>
</html>
4.세 자리로 이루어진 숫자를 입력받은 후 각각의 자리수를 분리하고 이 자리수를 출력하는 프로그램을 작성하라.
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var number = parseInt(prompt('세 자리 숫자를 입력하세요:'));
      var hundreds = Math.floor(number / 100);
      var tens = Math.floor((number % 100) / 10);
      var ones = number % 10;
      alert(hundreds + '백 ' + tens + '십 ' + ones);
    </script>
  </body>
</html>

5.다음 수식의 값을 계산하여 화면에 출력하라. x의 값은 사용자로부터 입력받는다
f(x) = (x^3 - 20) / (x - 7)
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var x = parseFloat(prompt('x의 값을 입력하세요:'));
      var result = (Math.pow(x, 3) - 20) / (x - 7);
      alert('f(x)의 값은 ' + result.toFixed(4));
    </script>
  </body>
</html>

6.2차원 평면에서 두 점 사이의 거리를 계산하는 프로그램을 작성
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var x1 = parseFloat(prompt('첫번째 점 x1 입력:'));
      var y1 = parseFloat(prompt('첫번째 점 y1 입력:'));
      var x2 = parseFloat(prompt('두번째 점 x2 입력:'));
      var y2 = parseFloat(prompt('두번째 점 y2 입력:'));
      var distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
      alert('거리는 ' + distance.toFixed(5));
    </script>
  </body>
</html>

5. 조건문

조건문은 특정 조건이 참인 경우에만 코드 블록을 실행하거나 건너뜀

(1) if문

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var temperature = 25;
      if (temperature > 30) {
        console.log('더워요!');
      }
    </script>
  </body>
</html>

(2) if-else

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var age = 17;
      if (age >= 18) {
        console.log('성인입니다.');
      } else {
        console.log('미성년자입니다.');
      }
    </script>
  </body>
</html>

(3) else if

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var score = 75;
      if (score >= 90) {
        console.log('A 학점');
      } else if (score >= 80) {
        console.log('B 학점');
      } else if (score >= 70) {
        console.log('C 학점');
      } else {
        console.log('D 학점');
      }
    </script>
  </body>
</html>

(4) 예제

- 사용자에게 숫자를 입력받아 입력받은수가 100보다 큰지 작은지 출력
- 100보다 작으면 홀수, 짝수 출력
- 100보다 크면 3의 배수인지 출력
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var a = 5;
      if (a > 100) {
        alert('크다');
      } else {
        alert('100보다 작다');
      }

      if (a > 100) {
        if (a % 3 == 0) {
          alert('3의배수');
        } else {
          alert('3의 배수가 아님');
        }
      } else {
        if (a % 2 == 0) {
          alert('짝수');
        } else {
          alert('홀수');
        }
      }
    </script>
  </body>
</html>

- 사용자에게 국어, 영어, 수학 점수를 입력받아 평균을 구한 뒤 수우미양가 구분하는 프로그램
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var kor = Number(prompt('kor'));
      var eng = Number(prompt('eng'));
      var math = Number(prompt('math'));
      var avg = (kor + eng + math) / 3;
      document.write(avg);
      document.write('<br>', avg.toFixed(2));

      if (avg > 90) {
        alert('수');
      } else if (avg > 80) {
        alert('우');
      } else if (avg > 70) {
        alert('미');
      } else if (avg > 60) {
        alert('양');
      } else {
        alert('가');
      }
    </script>
  </body>
</html>

- 사용자 입력 받아 홀수이면 홀수, 짝수이면 짝수를 화면에 출력
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var input = prompt('숫자 입력');
      input = Number(input);
      if (input % 2 == 0) {
        document.write('짝수<br>');
      }
      if (input % 2 == 1) {
        document.write('홀수<br>');
      }
      if (input % 2 == 0) {
        document.write('짝수<br>');
      } else {
        document.write('홀수<br>');
      }
    </script>
  </body>
</html>

- 3개중 가장 큰수를 출력
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var a = 512;
      var b = 52;
      var c = 30;
      if (a > b) {
        if (a > c) {
          alert(a);
        } else {
          alert(c);
        }
      } else {
        if (b > c) {
          alert(b);
        } else {
          alert(c);
        }
      }
    </script>
  </body>
</html>

6. 반복문

반복문은 코드 블록을 여러번 실행하는데 사용되는 구문

(1) for문

초기화, 조건 검사 및 반복단계 구성

for (let i = 1; i<=5; i++) {
	console.log(i);
}

(2) while문

주어진 조건이 참인 동안 코드 블록을 계속 실행

var i = 1;
while (i <=5) {
  console.log(i);
  i++;
}

(3) do-while문

코드 블록을 먼저 실행하고 조건을 검사한다. 조건이 참인경우 코드 블록 실행하고 거짓이면 밖으로 나감.

var i = 1;
do {
  console.log(i);
  i++;
} while(i<=5);

(4) 코드 예시

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <script>
    // 4~8까지 모든 수를 더하는 반복문
    var sum = 0;
    for (var i = 4; i <= 8; i++) {
      sum = sum + i;
    }
    document.write(sum);
    var i = 4;
    var sum = 0;
    while (i <= 8) {
      sum = sum + i;
      i++;
    }
    document.write(sum);

    var i = 4;
    var sum = 0;
    do {
      sum = sum + i;
      i++;
    } while (i <= 8);
    document.write(sum);
  </script>
  <body></body>
</html>

- 1~100까지 정수 중 3의 배수 합
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <script>
    var sum = 0;
    for (var i = 1; i <= 100; i++) {
      if (i % 3 == 0) {
        sum = sum + i;
      }
    }
    alert(sum);
  </script>
  <body></body>
</html>

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <script>
    var input = 4;
    var sum = 0;
    for (var i = i; i <= 100; i++) {
      if (i % input == 0) {
        sum = sum + i;
      }
    }
    alert(sum);
  </script>
  <body></body>
</html>

brand_mins

IT 개발자가 되기 위한 기록

다음 포스트

# 1. JavaScript 1일차(230918) [국비교육]

JavaScript

1. 자바스크립트 기초

(1) 화면에 출력하는 3가지 방법

(2) 파일위치

2. 상수, 변수 그리고 자료형

(1) 자료형

(2) 자료형 코드 예시

3. 다양한 연산자

(1) 산술연산자

(2) 할당연산자

(3) 비교연산자

(4) 논리연산자

(5) 삼항연산자

(6) 증감연산자

(7) 연산자 코드예시

4. 내장함수

(1) prompt()

(2) alert()

(3) confirm()

(4) prompt, alert, confirm 활용한 프로그램

(5) 연습문제

5. 조건문

(1) if문

(2) if-else

(3) else if

(4) 예제

6. 반복문

(1) for문

(2) while문

(3) do-while문

(4) 코드 예시

# 2. JavaScript 2일차(230920) [국비교육]

0개의 댓글