1.  윤년 확인하기

📌  윤년을 확인하는 함수
    윤년의 조건 :
    1)  4로 나누어 떨어지는 해는 윤년.
    2) 하지만 100으로 나누어 떨어지는 해는 윤년이 아님
    3) 하지만 400으로 나누어 떨어지는 해는 윤년.

<script>
    // 윤년을 확인하는 함수를 정의 - 정수 연도를 입력받아서 윤년의 여부를 불린형으로 반환.
    const isLeapYear = function (year) { // 반환값이 bool형인 함수의 이름은 is로 시작하게 만듦.
        const isLeapYear = (year % 4 === 0) && (year % 100 !== 0) || (year % 400 === 0);
        return isLeapYear;
    }

    console.log(`2020년은 윤년일까? === ${isLeapYear(2020)}`); // true. 4의 배수
    // true && true || false
    console.log(`2010년은 윤년일까? === ${isLeapYear(2010)}`); // false.
    // false && true || false
    console.log(`2000년은 윤년일까? === ${isLeapYear(2000)}`); // true.
    // true && false || true
    console.log(`1900년은 윤년일까? === ${isLeapYear(1900)}`); // false.
    // true && false || false
</script>

 


2.  a부터 b까지 더하는 함수

📌  a부터 b까지 더하는 함수
    1. 익명 함수로 작업. 합계를 저장할 변수는 함수 안에 지정할 것
    2. 1 + 2 + ... + 99 + 100 이니 for문 사용
    3. 매개 변수를 2개, 반환값이 있어야 함
<script>
    const sumAll = function (start, end) {
        let sum = 0;
        for ( let i = start; i <= end; i++) {
            sum += i;
        }
        return sum;
    }

    console.log(`1부터 100까지의 합: ${sumAll(1, 100)}`); // 5050
    console.log(`1부터 500까지의 합: ${sumAll(1, 500)}`); // 125250
</script>

 


3.  최솟값 구하기

<script>
    const min = function(array) {
        let minimum = array[0];
        for (let i = 1; i < array.length; i++) {
            if (minimum > array[i]) {
                minimum = array[i];
            }
        }
        return minimum;
    }

    const testArray = [52, 273, 32, 103, 275, 24, 57];
    console.log(`${testArray}중에서`);
    console.log(`최솟값 = ${min(testArray)}`); // 24

</script>

 


4. 배경색 바꾸기

📌  배열에 저장된 값으로 배경색 바꾸기
       ➡️  배열의 마지막이면 처음으로 가도록 수정
<head>
    <script>
        let i = 0;
        let changeColor = function() {
            const color = ['white', 'yellow', 'aqua', 'purple']; // 배열 선언

            const bodyTag = document.querySelector('body'); // body 태그를 불러옴.
            bodyTag.style.backgroundColor = color[++i % color.length]; 
            // body 태그의 background-color 변경
        }
    </script>
</head>
<body>
    <!-- 버튼을 클릭하면 changeColor() 함수 호출 -->
    <button onclick="changeColor();">배경색 바꾸기</button>
</body>

 

 

 

 

[ 내용 참고 : IT 학원 강의 ]


1.  함수 function

🐰  자바스크립트 프로그램은 단순히 동작 하나만 실행되는게 아니라 여러 가지 동작이 연결된다

🐰  이렇게 동작해야 할 목적대로 묶은 명령을 함수 function (= 코드의 집합) 이라 함

🐰  함수를 사용하면 각 명령의 시작과 끝을 명확하게 구별할 수 있고,

      묶은 기능에 이름을 붙여 필요할 때마다 호출하여 반복적으로 사용 가능

 

💡  함수를 사용하면 좋은 점
    1. 반복되는 코드를 한 번만 정리해놓고 필요할 때마다 호출하므로 반복 작업을 피할 수 있다
    2. 긴 프로그램을 기능별로 나눠 여러 함수로 나누어 작성하면 모듈화로 전체 코드의 가독성이 좋아진다.
    3. 기능별(함수별)로 수정이 가능하므로 유지보수가 쉽다.

💡  용어 정리
    ·  함수 정의 : 함수를 만든 것
    ·  함수 호출 : 함수를 사용하는 것
    ·  인수 : 함수를 호출할 때 괄호 내부에 여러가지 자료를 넣는 것
    ·  매개변수 : 함수를 정의할 때 전달받을 인수를 정의하는 것
    ·  리턴 값 : 함수를 호출해서 최종적으로 나오는 결과

1)  매개변수와 리턴값

 

🍯  매개변수와 리턴값은 함수의 필수 요소가 아니고, 필요할 때만 사용

/* 기본형 */
function 함수명 (매개변수1, 매개변수2, ... 매개변수n) {
    문장;
    문장;
    return 리턴값;
}
<script>
    const f = function (x) {
        return x * x;
    }

    // 함수를 호출
    console.log(f(3)); // 9. 매개변수 x에 전달되는 인수가 3이고 리턴값이 9.
    console.log(f()); // NaN
</script>

 

자바스크립트는 인수와 매개변수의 개수가 달라도 에러가 나지 않음 
<script>
    const test1st = function (a) {
        console.log(a);
    }
    
    test1st(); // undefined
    test1st(1); // 1
    test1st(1, 2); // 1
    test1st(1, 2, 3); // 1
</script>

 

매개 변수가 있는 함수 정의문
<script>
    const myFunc = function (name, area) {
        document.write('안녕하세요. ' + name + '입니다.', '<br>');
        document.write('사는곳은 ' + area + '입니다.', '<br><br>');
    };
    myFunc('홍당무', '서울');
    myFunc('깍두기', '부산');
</script>


2)  return 문


🍯  데이터를 반환하고 강제 종료
🍯  return의 역할  1) 데이터를 반환   2) 함수의 강제 종료 (반환값이 없어도 됨)

 

데이터 반환
<script>
    const getAvg = function (arrData) {
        let sum = 0;
        for(let i = 0; i < arrData.length; i++) {
            sum += Number(prompt(`${arrData[i]} 점수는 ?`, `0`));
        }

        const avg = sum / arrData.length;
        return avg;
        //alert(avg); // return 이후의 코드라서 실행이 안됨. (Unreachable code)
    }

    const arrSubject = ['국어', '수학', '영어'];
    const result = getAvg(arrSubject);

    document.write(`평균 점수는 ${result}점 입니다.`);
</script>

강제 종료
<head>
<style>
        * {
            padding: 0;
            margin: 0;
        }

        #galleryZone {
            text-align: center;
        }
</style>
<script>

    let num = 1;
    const showGallery = function (direction) {
    /*
    다음을 클릭한 경우 pic_1.jpg -> pic_2.jpg : 번호가 증가
    이전을 클릭한 경우 pic_9.jpg -> pic_8.jpg : 번호가 감소
    */
    if  (direction === 1) { // 다음을 클릭한 경우
        if (num === 9) {
            alert('마지막 이미지입니다');
            return; // 이미지가 9개인 경우 num이 9인 경우 함수 종료
        }
         num++;
    } else { // 이전을 클릭한 경우
        if (num === 1) {
            alert('첫 이미지입니다.');
            return; // 첫 이미지가 1번이어서 종료
         }
         num--;
    }
    const imgTag = document.getElementById('photo'); // id 값이 photo인 요소를 가져옴
    imgTag.setAttribute('src', 'images/pic_' + num + '.jpg'); // id 값이 photo인 요소의 src 속성을 변경
    }
</script>
</head>
<body>
    <div id ="galleryZone">
        <p><img src="./images/pic_1.jpg" id="photo" alt=""></p>
        <p>
            <button onclick="showGallery(0)">이전</button>
            <button onclick="showGallery(1)">다음</button>
        </p>
    </div>
</body>

 

 


2.  익명 함수 선언하기

 🐰  익명 함수 anonymous function : 이름이 없는 함수

 🐰  익명함수는 변수 선언(함수 정의) 후 호출 가능
 🐰  익명함수는 동일한 이름으로 재선언 불가능. let과 const의 특징

기본형 : function () {}
<!-- 변수 할당 --> 
let 변수 = function () {
    실행문;
}

 

<script>
    // 변수를 선언해서 함수를 할당.
    const func = function () {
        console.log('함수 내부의 코드입니다 ... 1');
        console.log('함수 내부의 코드입니다 ... 2');
        console.log('함수 내부의 코드입니다 ... 3');
        console.log('');
    }

    // 함수를 호출
    func();
    func();

    // 출력
    console.log(typeof func); // function. 함수의 자료형 확인
    console.log(func); // 함수 자체도 단순한 자료이므로 출력할 수 있음.
</script>

 

<script>
    /* 선언 전 호출시 */
    compute(); // Uncaught ReferenceError: Cannot access 'compute' before initialization
    let compute = function() {
        let x = 10;
        let y = 100;
        let result = x * y;
        console.log(result);
    };
    compute(); // 1000
</script>
<script>
    /* 재선언 시 */
    let compute = function() {
        let x = 10;
        let y = 100;
        let result = x * y;
        console.log(result);
    }; // Uncaught SyntaxError: Identifier 'compute' has already been declared 
</script>

 


3.  선언적 함수 

🐰  선언적 함수 : 이름이 있는 함수

🐰  선언적 함수는 재정의 가능

 기본형 : function 함수 이름 () {}


   ✏️  대부분의 프로그램은 선언적 함수만 사용하거나(C),

         선언적 함수를 주로 사용하고 익명함수를 보조적인 수단(C++, 자바의 람다)으로 사용
   ✏️  자바스크립트는 함수지향 프로그램(ECMA script 6 이후)이라서 변수에 함수 할당하거나,
         익명함수를 주로 사용하고 선언적 함수를 보조적인 수단으로 사용하는 것을 지향함.

 

<script>
    // 함수를 생성
    function func1st () {
        console.log('함수 내부의 코드입니다 ... 1');
        console.log('함수 내부의 코드입니다 ... 2');
        console.log('함수 내부의 코드입니다 ... 3');
        console.log('');
    }

    // 함수를 호출
    func1st();
    func1st();

    // 출력
    console.log(typeof func1st); // function
    console.log(func1st);
</script>


동일한 이름의 함수가 존재하는 경우
 -  선언적 함수의 경우 동일한 이름의 함수가 존재하면 뒤에 선언된 함수가 실행이 됨
<script>
    let num = 100;
    function menu() {
        num += 100;
        document.write(num, ": 앞의 함수 실행<br>");
    }
    menu(); // 100: 뒤의 함수 실행

    function menu() {
        document.write(num, ": 뒤의 함수 실행<br>");
    }
</script>

 

💡  선언적 함수를 변수에 할당하는 방법 
      1. 변수에 할당하면서 선언적 함수 선언
            ➡️  변수에 할당하면서 선언적 함수를 선언하면 익명함수로 처리
      2. 선언적 함수를 선언 후에 변수에 할당

 

<script>
    // 1. 변수에 할당하면서 선언적 함수 선언
    const func2nd = function namedFunc2nd() { // 변수를 선언해서 함수를 할당
        console.log('namedFunc2nd() 함수 내부의 코드입니다 ...');
        console.log('');
    }

    // 호출
    func2nd(); // 변수를 통해 함수를 호출.
    // namedFunction(); // Uncaught ReferenceError: namedFunction is not defined\
    console.log(typeof func2nd); // function. 함수의 자료형 확인

    // 2. 선언적 함수를 선언 후에 변수에 할당
    function namedFunc() {
        console.log('namedFunc() 함수 내부의 코드입니다 ...');
        console.log('');
    }
    const func1st = namedFunc; // 선언적 함수를 변수에 할당.

    func1st(); // 변수를 통해 함수 호출
    namedFunc(); // 함수를 호출
    console.log(typeof func1st); // function. 자료형 확인
</script>

 


4.  호이스팅  Hoisting

🐰  var로 선언한 변수 or 선언적 함수변수나 함수 이전에 호출하여도 에러를 발생하지 않음
🐰  자바스크립트 해석기는 소스를 훑고 var를 사용한 변수는 실행하기전에 기억해 두기 때문에 선언한 것과 같은 효과가 있다

<script>
    compute(); // 110. 선언적 함수는 함수 정의 전에 사용가능.
    function compute() {
        let x = 10;
        let y = 100;
        let result = x + y;
        console.log(result);
    }
    compute(); // 110
</script>

 

 

 

 

 

[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]


 

1.  산술 연산자

종류 설명 예시
+ 두 피연산자의 값을 더함  c = a + b
- 첫 번째 피연산자 값에서 두 번째 피연산자 값을 뺌  c = a - b 
* 두 피연산자의 값을 곱함  c = a * b
/ 첫 번째 피연산자 값을 두 번째 피연산자 값으로 나눔  c = a / b
% 첫 번째 피연산자 값을 두 번째 피연산자 값으로 나눈 나머지를 구함  c = a % b
++ 피연산자를 1 증가  a++ / ++a 
-- 피연산자를 1 감소  b-- / --b

 

+, -, * , /  연산 예시
<script>
      const num1 = 20;
      const num2 = 10;
      const score1 = num1 + num2;
      const score2 = num1 - num2;
      const score3 = num1 * num2;
      const score4 = num1 / num2;
      console.log(score1 + ',' + score2 + ',' + score3 + ',' + score4);
      // 30, 10, 200, 2
</script>

 

% 연산 예시
<script>
    const evenOdd = 2;
    const result = evenOdd % 2;
    let comment; // const는 선언과 동시에 초기화 해야 함
    if (result === 0) {
        comment = evenOdd + '는(은) "짝수" 입니다.';
    }else {
        comment = evenOdd + '는(은) "홀수" 입니다.';
    }
    console.log(comment); // 2는(은) "짝수" 입니다.

    // 삼항 연산자를 사용하면 선언과 동시에 초기화 가능
    const comment2 = (result === 0) ? evenOdd +'는(은) "짝수" 입니다.' 
                                    : evenOdd + '는(은) "홀수" 입니다.';
    console.log(comment2); // 2는(은) "짝수" 입니다.
</script>

 

💡 증감 연산자
a++  : 기존의 변수 값에 1을 더함. 후위.
++a  : 기존의 변수 값에 1을 더함. 전위.
a--   : 기존의 변수 값에 1을 뺌. 후위.
--a   : 기존의 변수 값에 1을 뺌. 전위.
<script>
    let num1 = 10;
    num1++;
    document.write(num1); // 11

    // 후위 : 해당 문장을 실행한 후 값을 더함.
    let num2 = 10;
    document.write(num2++); // 10
    document.write(num2++); // 11

    // 전위 : 값을 더한 후 해당 문장을 실행
    let num3 = 10;
    document.write(++num3); // 11
    document.write(++num3); // 12
</script>

 

<script>
    /* 응용 예시 */
    var increase = 0;
    var add = 0;
    ++increase;
    console.log(increase); // 1
    increase++;
    console.log(increase); // 2
    add = ++increase; // 3
    console.log(add + ',' + increase); // 3, 3
    add = increase++;
    console.log(add + ',' + increase); // 3, 4
</script>

 


2.  복합대입연산자

✏️  대입 연산자(=)와 다른 연산자를 함께 사용하는 연산자

종류 설명
= 연산자 오른쪽의 값을 왼쪽 변수에 할당
+= a += 1  ▶️  a = a + 1
-= a -= 1  ▶️  a = a - 1
*= a *= 1  ▶️  a = a * 1
/= a /= 1  ▶️  a = a / 1
%= a %= 1  ▶️  a = a % 1

 

<script>
    let value = 10;
    value += 10; // value = value + 10;
    document.write(value); // 20

    // 복합 대입 연산자를 사용해서 문자열을 조합
    let list = '';
    list += '<ul>';
    list += '    <li>Hello</li>';
    list += '    <li>javaScript..!</li>';
    list += '</ul>';

    document.write(list);
</script>


3.  비교 연산자

종류 설명 예시
조건식 결과값
== 피연산자가 서로 같으면 true 3 == "3" true
=== 피연산자도 같고 자료형도 같으면 true a === "3" false
!= 피연산자가 서로 같지 않으면 true 3 != "3" false
!== 피연산자가 같지 않거나 자료형이 같지 않으면 true 3 !== "3" true
< 왼쪽 피연산자가 오른쪽 피연산자보다 작으면 true 3 < 4 true
<= 왼쪽 피연산자가 오른쪽 피연산자보다 작거나 같으면 true 3 <= 4 true
> 왼쪽 피연산자가 오른쪽 피연산자보다 크면 true 3 > 4 false
>= 왼쪽 피연산자가 오른쪽 피연산자보다 크거나 같으면 true 3 >= 4 false
<script>
    const comparison1 = (5 > 2);
    console.log(comparison1); // true

    const comparison2 = (5 < 2);
    console.log(comparison2); // false

    const comparison3 = (5 == 5);
    console.log(comparison3); // true

    const comparison4 = (5 == '5');
    console.log(comparison4); // true

    const comparison5 = (5 === '5');
    console.log(comparison5); // false

    const comparison6 = (5 != '5');
    console.log(comparison6); // false

    const comparison7 = (5 !== '5');
    console.log(comparison7); // true

    const comparison8 = (5 === Number('5'));
    console.log(comparison8); // true
</script>

 

💡  문자열 비교
    -  비교 연산자는 숫자뿐만 아니라 문자열도 서로 비교 가능
    -  문자들의 아스키 ASCII 값을 비교해서 결정
    -  대문자 < 소문자  / 내림차순 값이 더 크다

 


4.  논리 연산자

✏️  boolean 연산자라고도 하며 true, false를 처리하는 연산자

종류 기호 설명
OR 연산자 || 피연산자 중 하나면 true여도 true
AND 연산자 && 피연산자가 모두 true일 경우에만 true
NOT 연산자 ! 피연산자의 반댓값을 지정

 

<script>
    let logic1, logic2, logic3, logic4, logic5, logic6;
    logic1 = (3 > 2) && (5 > 3);
    console.log(logic1); // true

    logic2 = (3 < 2) && (5 > 3);
    console.log(logic2); // false

    logic3 = (3 > 2) || (5 > 3);
    console.log(logic3); // true

    logic4 = (3 < 2) || (5 < 3);
    console.log(logic4); // false

    logic5 = !(3 < 2);
    console.log(logic5); // true

    logic6 = !(3 > 2);
    console.log(logic6); // false
</script>

 


 

5.  삼항 연산자

 

✏️  조건식의 결과(true, false)에 따라 결과 값을 다르게 나오게 해주는 연산자
✏️  형식 [ 조건식 ? 실행문1 : 실행문2; ]
✏️  조건식이 true 일 때는 실행문1, false 일 때는 실행문2가 실행됨

<script>
    let num1 = 10;
    let num2 = -10;
    console.log(num1 > 0 ? '양수' : '음수'); // 양수
    console.log(num2 > 0 ? '양수' : '음수'); // 음수

    let num3 = 31;
    let type = num3 % 2 === 0 ? '짝수' : '홀수';
    console.log(`${num3}는 ${type}입니다.`); // 31는 홀수입니다.

    // 템플릿 문자열을 사용해서 직접 코드를 넣는 방법도 추천
    let num4 = 32;
    console.log(`${num4}는 ${num4 % 2 === 0 ? '짝수' : '홀수'}입니다.`); // 32는 짝수입니다.

    // 숫자 0은 false, 나머지 숫자는 true.
    console.log(`${num4}는 ${num4 % 2 ? '홀수' : '짝수'}입니다.`); // 32는 짝수입니다.
</script>

 

 

 

 

[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]

 


 

1.  변수  variable

👩🏻‍🚀  변수란 프로그램을 실행하는 동안 값이 여러 번 달라질 수 있는 데이터를 가리킴

👩🏻‍🚀  상수 constant 는 값을 한 번 지정하면 바뀌지 않는 데이터

 

1) 변수 선언 규칙

①  변수 이름은 일반적으로 라틴 문자(0-9, a-z, A-Z)와 밑줄 문자(_)를 사용
         - 띄어쓰기 허용 x, 숫자, 밑줄(_)은 첫번째 문자 x

②  영어 대소문자를 구별하며 예약어는 변수 이름으로 쓸 수 x
         - varfunctionletfor와 같은 단어

③  lower camel case 표기를 사용
④  변수 이름은 의미있게 작성 ( 이름만 보고도 대충 어떤 값인지 추측할 수 있어야 함 )

 

<script>
    var name = 10; // var : 변수 선언을 의미
    var str = 'javascript';
    var temp = true;
    // num, str, temp : 변수를 구분하는 이름(변수명)
    // 10, 'javascript', true : 변수에 저장 되는 데이터(값)
    document.write(num + '<br>' + str + '<br>' + temp + '<br><br>');

    // 여러 개의 변수를 선언할 경우 다음과 같은 방법으로 선언할 수 있다.
    var num, str, temp;
    num = 20;
    str = 'ECMAscript'
    temp = false;

    document.write(`${num}<br> ${str}<br> ${temp}<br><br>`);

    var num = 30, str = 'jquery', temp = true;
    document.write(num + '<br>' + str + '<br>' + temp + '<br><br>');

    // 변수는 새로운 데이터가 저장되면 기존 데이터는 사라진다.
    var num = 0;
    num = 10;
    document.write(`${num} <br>`); // 10

    num2 = 1
    document.write(nm2);
</script>

 


 

2.  자료형

👩🏻‍🚀  자료 data란 프로그래밍에서 프로그램이 처리할 수 있는 모든 것

👩🏻‍🚀  자료형 data type이란 컴퓨터가 처리할 수 있는 자료의 형태

👩🏻‍🚀  자바스크립트 자료형

       - 기본 자료형 : 숫자, 문자열, 논리형

       - 복합 자료형 : 배열, 객체

       - 특수 자료형 : undefined, null

종류 설명 예시
기본 자료형 숫자형 따옴표 없이 숫자로만 표기 var birthYear = 1995;
문자열 따옴표("" or '')로 묶어서 표기
숫자를 따옴표로 묶으면 문자로 인식
var greeting = 'Hello';
var birthYear = '1995';
논리형 참과 거짓이라는 2가지 값만 있는 유형
true, false 소문자로 표시
var isEmpty = true;
복합 자료형 배열 하나의 변수안에 여러 개의 값을 저장 var seasons = ['봄', '여름', '가을', '겨울']
객체 함수와 속성을 함께 포함 var date = new Date();
특수 자료형 undefined 자료형이 지정되지 않은 경우
  ex. 변수 선언만 하고 값을 할당하지 않은 변수
null 값이 유효하지 않은 경우

 



1) 기본 자료형 : 문자열 string


✏️  문자와 문자열을 구분하는 언어도 있으나 자바 스크립트는 문자열로 통일
✏️  문자열 자료형을 만드는 방법 : 작은 따옴표나 큰 따옴표로 감쌈

 

<script>
    console.log("안녕하세요");
    console.log('안녕하세요');

    //console.log("안녕하세요'); // 따옴표 시작과 끝은 같아야 함

    // 혼용하는 것도 가능
    console.log('this is "string"');
    console.log("this is 'string'");

    // 이스케이프 문자 사용 : 따옴표를 문자 그대로 사용하고 싶을 때
    console.log('this is \'string\'');
    console.log("this is \"string\"");

    /* 이스케이프 문자 사용 예
    \n : 줄바꿈
    \t : 탭문자
    \\ : 역슬래시(\) 자체
     */
    console.log("this is 'string' \nthis is 'string' ") // 줄 바꿈
    console.log("this is 'string' \tthis is 'string' ") // 탭 문자
</script>

콘솔 창 결과


 

💡  문자열 연산

문자열에 적용할 수 있는 처리 
  1. 문자열 연결 연산 : 문자열 + 문자열
  2. 문자 선택 연산 : 문자열[인덱스] -> 문자 하나
  3. 문자열 길이 : 문자열.length -> 문자 갯수
<script>
    console.log('안녕하세요.' + '자바 스크립트 입니다.');  // 안녕하세요.자바 스크립트 입니다.
    let greet = '안녕하세요.'; 
    console.log(greet + '자바 스크립트 입니다.'); // 안녕하세요.자바 스크립트 입니다.

    // 문자 선택 연산. 인덱스는 0부터 시작하는 정수로 이루어짐
    console.log('안녕하세요.'[0]); // 안
    console.log('안녕하세요.'[1]); // 녕
    console.log(greet[0]); // 안
    console.log(greet[1]); // 녕

    // 문자열의 길이
    console.log("안녕하세요.".length); // 6
    console.log(greet.length); // 6

    let name = prompt('이름을 입력');
    alert('이름은 '+name.length+'자 입니다.')

    let name2 = prompt('한글로 이름을 입력');
    alert('당신의 성은 '+ name2[0] +'입니다.');
</script>

 


💡 템플릿 문자열
문자열 결합 연산자를 사용하지 않고, 문자열 안에 바로 표현식을 사용할 수 있음

쌍따옴표나 홑따옴표 대신 백틱(`)을 사용 
<script>
    // 일반적인 방법 : 믄자열 결합 연산자 사용
    console.log('표현식은 273 + 52의 값은 ' + (273 + 52) + '입니다.');

    // 템플릿 문자열 사용
    console.log(`표현식은 273 + 52의 값은 ${273 + 52}입니다.`); // 백틱(`)을 사용

    let name = prompt('한글로 이름을 입력');
    alert(`당신의 성은 ${name[0]} 입니다.`);
</script>

 


 

2) 기본 자료형 : 숫자형 number

 

✏️  자바 스크립트는 정수와 실수의 구분이 없음
✏️  따옴표 없이 사용, 숫자에 따옴표를 붙이면 문자열 자료형이 됨

✏️  실수를 2진수로 변환해서 계산하는데, 이 때 자릿수가 많은 소수로 변환되어 계산되기 때문에 정확하지 x

    <script>
        console.log(100);
        console.log(123.456);

        // 숫자 관련 연산을 사용
        console.log(200 + 100); // 300
        console.log(200 - 100); // 100
        console.log(200 * 100); // 20000
        console.log(200 / 100); // 2

        // 프로그래밍에서는 나머지 연산이 자주 사용됨
        console.log(200 % 100); // 0
        console.log(200 % 99); // 2

        // 실수 사용시에 정확한 계산은 힘들다
        console.log(0.2 + 0.1); // 0.30000000000000004

        console.log(200 + 100); // 300
        console.log('200' + '100'); // 200100
    </script>

 

3) 기본 자료형: 논리형 boolean

 

✏️  참(True)과 거짓(False) 두 가지 값만 가지는 자료형

 

💡 비교 연산자 
    === : 양쪽이 같다.
    !==  : 양쪽이 다르다.
    >      : 왼쪽이 더 크다.
        : 오른쪽이 더 크다.
    >=    : 왼쪽이 더 크거나 같다.
    <=    : 오른쪽이 더 크거나 같다.

 

<script>
    console.log(1 === 2); // false 양쪽이 같다.
    console.log(1 !== 2); // true 양쪽이 다르다.
    console.log(1 > 2); // false 왼쪽이 크다.
    console.log(1 < 2); // true 오른쪽이 크다.
    console.log(1 >= 2); // false 왼쪽이 크거나 같다.
    console.log(1 <= 2); // true 오른쪽이 크거나 같다.

    // 문자열에도 비교 연산자 사용 가능. 내림차순 값이 크다.
    console.log('강아지' > '냐옹이'); // false

    // 논리 부정 연산자 (!)
    // 값을 반대로 바꿈
    console.log(!true); // false
    console.log(!false); // true
</script>

 


4) undefined와 null 자료형

 

✏️  undefined : 상수와 변수로 선언하지 않거나 변수를 선언하면서 값을 지정하지 않은 경우
✏️  상수는 선언할 때 반드시 값을 지정해야 하므로 값이 없는 상수는 존재하지 않음

✏️  null : ' 데이터 값이 유효하지 않은 상태 '

<script>
    'use strict'; // 엄격 모드

    console.log(typeof(a)); // undefined

    let b;
    console.log(typeof(b)); // undefined

    c = 100;
    console.log(typeof(c)); // number(엄격모드 지정 안할 시)
</script>

 


 

3. 자료형 검사  typeof

👩🏻‍🚀  자료형 확인할 때 'typeof' 사용

<script>
    let num = 10;
    console.log(num);
    num ='하이';

    // typeof 연산자 사용 : typeof(자료)
    console.log(typeof('안녕하세요')); // string
    console.log(typeof(100)); // number
    console.log(typeof(true)); // boolean

    // 괄호가 없어도 됨 : typeof가 연산자라서 가능
    console.log(typeof '안녕하세요'); // string
    console.log(typeof 100); // number
    console.log(typeof true); // boolean

    console.log(typeof "안녕하세요" === "string"); // true. "안녕하세요"의 자료형이 string
    console.log(typeof ("안녕하세요") === "string"); // true. "안녕하세요"의 자료형이 string
    console.log(typeof ("안녕하세요" === "string")); // boolean. "안녕하세요" === "string"의 결과값은 false

    // 자바 스크립트에서는 변수에 함수를 할당하는 것이 가능.
    // 즉, 함수도 하나의 자료형임.
    let fun = function() {
        console.log('hello');
    }
    fun(); // hello
    console.log(typeof fun); // function
</script>

 


4.  자료형 변환

 

 숫자 자료형으로 변환할 때는 Number() 함수를 사용
<script>
    // prompt로 입력 받으면 기본형이 문자열
    const rawInput = prompt("inch 단위의 숫자를 입력해주세요."); // 숫자를 입력.
    console.log(typeof rawInput); // String

    // 입력받은 데이터를 숫자형으로 변경하고 cm 단위로 변경.
    const inch = Number(rawInput);
    console.log(typeof inch); // Number
    const cm = inch * 2.54;

    // 출력
    alert(inch + 'inch는 ' + cm + 'cm 입니다.');
    alert(`${inch}inchsms ${cm}cm 입니다.`);
</script>

 

문자 자료형으로 변환할 때  String() 함수 사용
<script>
    var number = 100;
    console.log(typeof(number)); // number

    number = String(number); 
    console.log(typeof(number)); // string
    console.log(number); // 100
</script>

 

불 자료형으로 변환할 때 Boolean() 함수 사용
<script>
    // 숫자를 불린으로 형변환. 0은 false 나머지는 true
    var number = 200; 
    console.log(typeof(number)); // number
    console.log(number); // 200

    number = Boolean(number);
    console.log(typeof(number)); // boolean
    console.log(number); // true

    let num = 0;
    console.log(typeof(num)); // number
    console.log(num); // 0

    num = Boolean(num);
    console.log(typeof(num)); // boolean
    console.log(num); // false. 0은 false로 변환.

    // 문자열을 불린으로 형변환. 빈 문자열은 false, 나머지는 true.
    let string2 = 'hello';
    console.log(typeof(string2)); // string

    string2 = Boolean(string2);
    console.log(typeof(string2)); // boolean
    console.log(string2); // true

    let string3 = '';
    console.log(typeof(string3)); // string

    string3 = Boolean(string3);
    console.log(typeof(string3)); // boolean
    console.log(string3); // false
</script>

 

 

 

 

[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]


 

1.  자바 스크립트

👩🏻‍🚀  자바 스크립트는 프로그램을 실행하는 도중에 변수에 저장되는 데이터 타입이 동적으로 바뀌는 동적 타입 언어

 

1) 웹 문서 안에 <script> 태그로 자바스크립트 작성

 

🍯  소스 코드가 짧을 경우 웹 문서에서 자바스크립트를 실행할 위치에 바로 코드 작성 가능

🍯  <script></script> 태그 사용

🍯  가급적 이미지나 텍스트 등의 요소를 다 표시한 후에 실행

🍯  영어 대소문자를 구별함

<body>
    <!-- 글자색 바꾸기 -->
    <h1 id="heading">자바스크립트</h1>
    <p id="text">위 텍스트를 클릭해 보세요</p>
    
<script>
    let heading = document.querySelector('#heading');
    heading.onclick = function() {
        heading.style.color = 'red';
    }
</script>
</body>


 

2) 외부 스크립트 파일로 연결해서 작성

 

<script src="외부 스크립트 파일 경로"></script>

 

🍯  CSS 처럼 자바스크립트 소스도 따로 파일로 저장한 후 웹 문서에 연결해서 사용 가능

🍯  외부 자바스크립트 파일은 <script> 태그 없이 소스만 작성하고 확장자는 *.js로 저장

<body>
    <!-- 글자색 바꾸기 -->
    <h1 id="heading">자바스크립트</h1>
    <p id="text">위 텍스트를 클릭해 보세요</p>

    <!-- css 처럼 외부 파일로 만들어서 실행 가능. -->
    <script src="js/change-result.js"></script>

</body>

 


 

2.  자바스크립트 용어와 기본 입출력 방법

1) 식 espression과 문 statement

 

🐝  '식'은 표현식이라고도 함. 어떤 값을 만들어 낼 수 있다면 모두 식이 될 수 있고, 식은 변수에 저장됨

🐝  '문'은 명령과 비슷. 문의 끝에는 세미콜론(;)을 붙여서 구분  ex. 조건문, 제어문

inch * 2.54 // 연산식은 식
"안녕하세요?"; // 문자열도 식
5           // 숫자도 식

 


2) 간단한 입출력 방법

 

(1) 알림 창 출력

alert(메시지)

 

🐝  알림창을 만드는 방법은 alert()를 입력하고 괄호 안에 따옴표와 함께 메시지를 넣어주면 된다.

 

<script>
    alert('안녕하세요!');
    alert(10 * 30);
</script>

 


 

(2) 확인 창 출력

confirm(메시지)

 

🐝  알림 창은 단순히 메시지를 보여주는 기능만 하지만, 확인 창은 사용자가 [확인], [취소] 버튼 중에서 직접 클릭

🐝  확인을 눌러야 이후의 코드가 실행(alert()함수가 종료)이 됨

<script>
    var reply = confirm('정말 배경 이미지를 바꾸겠습니까?')
</script>


 

(3) 프롬프트 창에서 입력받기

prompt(메시지) 또는 prompt(메시지, 기본값)

 

🐝  프롬프트 prompt 창은 텍스트 필드가 있는 작은 창

🐝  텍스트 필드 안에 간단한 메시지를 입력할 수 있으며 그 내용을 가져와 프로그램에 사용 가능

🐝  기본값을 지정하지 않으면 빈 텍스트 필드로 표시

 

<script>
    var name = prompt("이름을 입력하세요.", "홍길동");
</script>


 

(4) 브라우저 화면에 출력을 담당하는 document.write()문

 

🐝  결과값을 확인하는 용도로 많이 쓰임

🐝  괄호 안에 결과값이 저장된 변수나 html 태그를 따옴표 안에 넣을 수도 있다.

<script>
    document.write('<h1>환영합니다.</h1>')
</script>

 


 

(5) 콘솔 창에 출력하는 console.log()문

 

🐝  괄호 안의 내용을 콘솔 창에 표시. 콘솔 창은 웹 브라우저의 개발자 도구 창에 포함되어 있는 공간이다.

🐝  콘솔 창에서 소스 코드의 오류를 발견하거나 변숫값을 확인할 수도 있다.

🐝  괄호 안에 변수, 따옴표 사이에 표시할 텍스트를 넣을 수 있다. but! html 태그는 불가

 

주의점 : 자바 스크립트가 각각의 문장을 구별하는 방법
    1) 문장의 끝에 ;(세미 콜론)  2) 줄 바꿈 둘 중 하나
다른 언어로의 확장(파이썬, 코틀린을 제외한 대부분의 언어가 세미 콜론 사용, 즉 1번 사용) 및
명료성을 위해 세미 콜론을 붙이는 것이 좋음. (해당 라인을 작업 중인지 완료 했는지 구분)

 

<script>
    console.log('안녕하세요')
    console.log(10*30)
</script>

 

콘솔 에러 확인하기 - 빨간색 메세지로 나온다.
ReferenceError : 단어 오탈자 / SyntaxError : 기호에서 오탈자 
<script>
    aler('안녕하세요!'); /* Uncaught ReferenceError: aler is not defined */
</script>

 

 

 

 

[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]


1.  flex-direction

🐰  flex-direction이 row인 경우 컨테이너의 자식 요소에 넓이를 지정하지 않으면 내부 컨텐츠에 따라 넓이가 정해짐
         ▶️  inline-block 속성과 유사
      

🐰  flex-direction이 column인 경우 넓이를 지정하지 않으면 자동으로 넓이가 100%로 정해짐.
        ▶️  block 속성과 유사

    <style>
        #container {
            margin-top: 10px;
            border: 3px solid #af94de;
            display: flex;
            flex-direction: column | row;
        }

        .item {
            padding: 10px;
            margin: 10px;
            background: #fcfc9e;
            color: #525d73;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
        <div class="item">Item 7</div>
        <div class="item">Item 8</div>
    </div>
</body>

 

flex-direction: row

 

flex-direction:column

 

 


 

2. flex-wrap

🐰  flex-direction: column 일 때 속성 적용 안 됨

     /* 위 예제 스타일과 똑같이 적용하고 flex-wrap 속성만 추가 */
     #container {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap | wrap-reverse;
        }

    </style>
</head>
<body>
    <div id="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
        <div class="item">Item 7</div>
        <div class="item">Item 8</div>
        <div class="item">Item 9</div>
        <div class="item">Item 10</div>
        <div class="item">Item 11</div>
        <div class="item">Item 12</div>
    </div>

</body>

 

주축이 row인 경우, flex-wrap 속성의 wrap과 wrap-reverse를 적용했을 때
주축이 column인 경우 적용 안됨

 


 

3.  justify-content

🐰  flex-direction: column 일 때 속성 적용 안 됨

flex-start : 줄의 시작 지점에 배치. 왼쪽 맞춤. 기본 값
flex-end : 줄의 끝 지점에 배치. 오른쪽 맞춤.
center : 가운데 맞춤
space-between : 왼쪽과 오른쪽 끝에 있는 요소를 끝에 붙이고, 남은 부분들은 균등한 공간을 형성한 상태로 배치.
space-around : 항목들 간에 동일한 간격

space-evenly : 왼쪽과 오른쪽 끝에 있는 공간도 포함해서 균등한 여백을 형성한 상태로 배치
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #container {
            margin-top: 10px;
            border: 3px solid #af94de;
            display: flex;
            justify-content: flex-start | flex-end | center |
                             spac-between | space-around | space-evenly;
        }

        .item {
            padding: 10px;
            background: #fcfc9e;
            color: #525d73;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
        <div class="item">Item 7</div>
        <div class="item">Item 8</div>
    </div>

</body>

 

flex-start
flex-end
center
space-between
space-around
space-evenly

 


 

4.  align-itmes

🐰  수직방향 맞춤. 부모 요소에 빈공간이 있으면 자식 요소에 수직 방향으로 어떻게 맞출지 지정

 

flex-start       - 부모 요소의 윗부분에 맞춰 배치
flex-end         - 부모 요소의 아랫부분에 맞춰 배치
center             - 중앙에 배치
stretch            - 부모 요소의 높이 또는 콘텐츠의 가장 높이가 높은 자식 요소에 맞춰 늘어남. 초기값
baseline          -  문자 기준선에 맞춰 배치

 

<head>
    <style>
        #container {
            margin-top: 10px;
            border: 3px solid #af94de;
            
            display: flex;
            align-items: flex-start | flex-end | center | stretch | baseline;
        }

        .item {
            padding: 10px;
            margin: 10px;
            background: #fcfc9e;
            color: #525d73;
        }
        
        .item:nth-child(2) { /* 두번째 박스만 지정 */
            padding: 20px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
    </div>
</body>

flex-start
flex-end
center
stretch
baseline

 


 

5.  align-content

🐰  여러 줄이 될 때의 맞춤. 자식 요소가 여러 줄이 됐을 때의 수직 방향 맞춤을 지정
🐰  flex-wrap: nowrap 이 적용 되어 있다면 자식 요소가 한 줄이 되므로 align-content 속성 의미가 없음

 

flex-start : 부모 요소의 윗부분에 맞춰 배치
flex-end : 부모 요소의 아랫부분에 맞춰 배치
center : 중앙에 배치
space-between : 위아래 끝에 있는 요소를 끝에 붙이고, 남은 부분들은 균등한 공간을 형성한 상태로 배치
space-around : 위아래 끝에 있는 여백도 포함해서 균등한 공간을 형성한 상태로 배치
space-evenly : 항목들 간에 동일한 간격
stretch : 부모 요소의 높이에 맞게 자식 요소의 높이를 늘여서 배치

 

 
        #container {
            width: 400px;
            height: 300px;

            display: flex;
            flex-wrap: wrap;
            align-content: flex-start | flex-end | center | space-between
                           space-around | space-evenly | stretch ;
        }

    </style>
</head>
<body>
    <div id="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
        <div class="item">Item 7</div>
        <div class="item">Item 8</div>
        <div class="item">Item 9</div>
        <div class="item">Item 10</div>
        <div class="item">Item 11</div>
        <div class="item">Item 12</div>
    </div>

</body>

flex-start / flex-end
center / space-between
space-around / space-evenly

 

stretch

 

 

 

 

[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]

+ Recent posts