Javascript 기초 02 : 버튼, 변수, 입력방법, 연산자

Javascript 기초 02 : 버튼, 변수, 입력방법, 연산자

2023. 3. 7. 16:47ㆍ카테고리 없음

☞ javascript 공부 내용 요약

HTML은 웹 문서의 골격을 만드는 것
CSS는 웹 문서를 꾸미는 것
Javascript는 웹 문서를 제어하는 것

프로그램 = 명령어의 집합
    = 사용자의 입력을 받아서 처리하고 출력하는 명령어 집합

자료(Data) - 프로그램이 처리할 수 있는 모든 것

자료를 처리하려면 그를 위한 공간이 필요
    → 프로그램에 주어지는 공간 = 변수

    자료형(데이터의 형태)
    1) 숫자형(number)
    2) 문자열형(string)
    3) 논리형(boolean)
    4) 정해지지 않음(undefined)

변수 사용 용도
    1. 사용자의 입력값 저장
    2. 계산 결과(CPU의 연산 결과) 저장
    3. 제어해야 하는 요소를 저장
    4. 제어 조건의 저장 등

변수명(식별자) 명명 규칙
1. 알파벳 대소문자, 0~9 숫자, '_'. '$'
2. 숫자로 시작하면 안된다.
3. 대소문자는 구분한다.
4. 예약어 사용 불가
5. 글자 사이에 공백 불가(카멜케이스 사용 권장)
6. 식별자

변수 사용법
1. 변수 선언(작성/생성)
2. 변수 초기화 또는 데이터 대입 ← 사용
3. 변수 활용(저장한 데이터를 사용)

변수 선언법
- 키워드 : var, let, const
문법) var 식별자;

자바스크립트 작성 위치
1. 인라인 : html 요소의 이벤트 속성
    예) onclick = "자바스크립트코드"
2. 문서 내부 : <script> 태그 내에 작성
    <script> 태그는 문서의 모든 곳에 위치할 수 있다.(style은 head 내부에만 위치)
3. 문서 외부 : xxx.js 파일을 작성하여 문서에 포함
    <script> 태그를 사용

프로그램의 구성
1. 입력
2. 연산
3. 출력

순차적인 프로그램 구성 = 출력 > 입력 > 연산 > 출력

자바스크립트 출력 방식
1. 문서 내 출력 : document.write("출력 내용");
2. 경고창 출력 : alert("출력 내용");
3. 콘솔(로그) 출력 : console.log("출력 내용");

자바스크립트 입력
    입력방식
    1. 대화창 활용
        대화창의 종류
        1) alert(경고창) : 메시지와 확인 버튼으로 구성
        2) confirm(확인창) : 메시지와 확인, 취소 버튼으로 구성
            A와 B 2가지 중 한가지 작업을 선택할 수 있게 한다.
            확인 버튼 클릭 - true 값이 입력된다.
                A 작업을 하도록 코드를 작성
            취소 버튼 클릭 - false 값이 입력된다.
                B 작업을 하도록 코드를 작성
        3) prompt(입력창) : 메시지, 입력칸, 확인, 취소 버튼으로 구성

        입력 상태
        1) 문자열 입력
        2) 빈 문자열 입력("") - 빈 문자열("")도 문자열임!
        3) 입력 취소(아무것도 입력받지 않음)

    2. html의 input 요소 활용

    HTML 요소를 선택하여 제어하기(변수에 요소 넣기)
    DOM(Document Object Model) 활용하기
    HTML 요소를 제어하기 위한 (자바스크립트) 객체 모델
    Document Object : 문서 객체
        HTML 요소 = 문서 객체

    요소를 선택하는 방법
    1. 요소의 id 속성을 사용하는 방법
        문형) document.getElement

    참고) 요소의 식별이나 분류에 사용하는 속성 - class, id
        요소의 이름(태그명) ← 요소를 선택하는 데 사용 가능
        class - 분류
        id - 식별

    특정 html 요소에 출력하기
    1) innerHTML - 요소의 내부(컨텐츠)에 출력
        태그 작성시 태그를 하위 요소로 처리
    2) innerText - 요소의 내부에 출력
        태그 작성시 태그를 글자로 그냥 출력

    둘 다 기존 내용을 지우고 출력한다!(덮어쓴다!)

버튼 이벤트(클릭) 처리(Evenet Handling)
    1) html 태그의 onclick 속성을 사용
    2) addEventListener를 사용

나이 계산기 2 만들기
    입력은 input 태그로.
    출력은 innerHTML로.
    +) 조건에 따라 스타일을 변경

제어문
1) 분기제어문 if : 만약에 ...라면 ~~해라. 아니라면 하지마라.
    문법) if(조건식) {
        A 작업 코드
    }
    조건식이 참(true)라면 A 작업 코드를 실행하고, 거짓(false)이라면 실행하지 마라.

    조건식에 올 수 잇는 것들 :
    1) boolean 형태의 변수
    2) true/false로 결과가 나오는 비교식
    3) true 또는 false 값 자체

비교식 : A > 19

    문법2)
    if(조건식){
            A 작업 코드들;
    }
    else {
            B 작업 코드들;
    }

    조건식이 true일 경우 A 작업 코드들을.
    false일 경우 B 작업 코드들을 선택적으로 실행한다.

연산자(컴퓨터의 궁극적인 목표 → 연산)
1. 산술연산자 - 수학 계산을 할 때 사용하는 연산자
    +,-,*,/
    % : 나머지를 취하는 나누기 연산
        나눗셈 공식 : a와 b가 자연수일 때, a = bp + r
        q(quotient)는 몫, r(remainder)은 나머지
        참고) 0으로 나눌 수는 없다. (무한대의 값이 나온다.)
            나눗셈의 결과는 실수( 5 / 2 = 2.5 )
    ++ : 증가연산자. 단항연산자. 피연산자를 1 증가시킨다.
    -- : 감소연산자. 단항연산자. 피연산자를 1 감소시킨다.

        증감 연산자의 위치에 따른 차이점
        전위형 : 피연산자 앞에 연산자가 오는 경우
        후위형 : 피연산자 뒤에 연산자가 오는 경우

2. 할당연산자(a.k.a 대입연산자)
    산술 연산자 + '='인 형태(증감 연산자 제외)
    =, +=, -=, *=, /=, %=

3. 연결연산자
    + : 문자열 간의 연결, 문자열과 숫자형의 연결
        하나의 문자열로 만듦. 출력시 많이 사용.

4. 비교연산자(두 피연산자를 비교하는 연산자)
    결과값이 논리값(true/false)
    == : 두 피연산자가 같은가를 비교하는 연산자
    === : 두 피연산자의 값과 자료형이 같은가
    != : 두 피연산자가 같지 않은가를 비교하는 연산자
    !== : 두 피연산자의 값이나 자료형이 다른가?

📌 변수 선언 규칙을 참고하여 변수 선언하기

var currentYear; //올해 연도 변수 선언
var birthYear; //태어난 연도 변수 선언
var age; //계산한 나이 변수 선언

var currentYear, birthYear, age; //변수 한꺼번에 선언하기

여러 단어를 연결한 변수 이름은 중간에 대문자를 섞어 쓴다.(카멜 케이스)
변수 이름은 의미있게 작성해야 한다.

📌나이 계산 프로그램 만들기

(...생략)
<body>
    <script>
        //나이 계산 프로그램 만들기
        //현재 연도를 기반으로 생년을 입력하면 나이를 출력해주는 프로그램
        //변수는? 기준년도 저장 변수, 생년 저장 변수
        //나이 저장 변수
        var currentYear; //기준연도
        var birthYear; //태어난 연도
        var age; //저장할 나이

        currentYear = 2023;
        birthYear = prompt("태어난 연도를" + "입력하세요. (YYYY)");
        age = currentYear - birthYear + 1;

        document.write(currentYear + "년 현재<br>");
        document.write(birthYear + "년에 태어난 사람의 나이는 "
        + age + "세입니다.");
    </script>
</body>
(...생략)

결과 확인

프롬프트에 태어난 연도를 입력하면 계산되어 결과가 나타나는 모습

기준 연도를 바꾸고 싶다면 currentYear에 할당된 값을 수정한다.

📌나이 계산 프로그램 만들기2 (함수 활용) - function()

(...생략)
<body>
    태어난 연도 : <input id="in_year" type="text"><br>
    <button id="btn">계산</button>
    <p id="result"></p>
</body>
<script>
    var cuYear = 2023;
    var bYear;
    var age;

    //요소를 저장할 변수
    var inYear = document.getElementById("in_year");
    var b = document.getElementById("btn");
    var res = document.getElementById("result");

    b.addEventListener("click", function(){
        bYear = inYear.value; //input 태그의 입력값을 가져와서
                            //bYear에 대입(저장)
        console.log(bYear); //입력값 확인

        age = cuYear - bYear + 1; //계산 결과를 지정 위치(요소)에 출력
        console.log(age);

        res.innerHTML = bYear + "년에 태어난 사람의 나이는 " + 
        age + "세입니다.";

        //스타일을 바꿔보자. (나이별로 글자색을 변경)
        //성년과 미성년 구분(19 이상과 이하)
        if(age > 18){
            //글자색을 파란색
            res.style.color = "blue";
            res.style.backgroundColor = "yellow";
            //html <style>태그에서는 background-color
            res.style.border = "1px solid green";
        }
        else {
            //글자색을 빨간색
            res.style.color = "white";
            res.style.backgroundColor = "black";
        }
    });
</script>
(...생략)