단비의 코딩 공부 blog

[Vanilla JS]study 1일차 - 기본문법과 변수 본문

javascript&jquery

[Vanilla JS]study 1일차 - 기본문법과 변수

황굽달 2022. 11. 22. 11:01

1.내부 자바스크립트

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS기본문법과 변수(1일차)</title>
    <script>
        //내부자바크립트 : HTML문서 내부에 JS언어를 작성 (추천X)
        alert('Hello World');
    </script>
    
</head>
<body>
    
</body>
</html>

2.외부 자바스크립트

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS기본문법과 변수(1일차)</title>    
    <!-- 외부자바스크립트 : 외부 JS문서를 HTML에 연결하는 방식 -->
    <script src="test.js">
        //여기에 JS언어 사용X
    </script>
</head>
<body>
    
</body>
</html>
alert('안녕하세요');

* test.js로 스크립트 이름을 생성후 연동한다.

 

3. 스크립트 주석

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JS기본문법과 변수</title>
        <script>
            //주석(comment) : 코드에 대한 설명을 작성
            //1. 1줄 주석 : //
            //2. 여러줄 주석 : /* */ (alt + shift + a도 사용가능)

            /* alert('안녕하세요'); */
        </script>
    </head>
    <body>
        
    </body>
</html>

4.JS 데이터 유형

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JS기본문법과 변수</title>
        <script>
            //데이터유형
            //1. 숫자 : 그냥 작성
            //2. 문자열 : 따옴표 내부에 작성
            //3. 불(boolean) : 결과값이 true 혹은 false로 반환
            //4. 함수 : 코드의 집합
            //5. 객체 : JS에 명령줄 수 있는 모든 대상
            //6. undefined : 값을 배당받지 못한 상태

            //식(표현식) : 데이터를 도출하는 코드
            //;(세미콜론) : 식을 종료할 때 사용하는 기호 - 작성하지 않아도 틀리지는 않음
            
        </script>
    </head>
    <body>
        
    </body>
</html>

5.데이터 출력법

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JS기본문법과 변수</title>
        <script>
            //1. 경고창
            alert('테스트');
            
            //2. 문서에 직접 출력
            document.write('테스트');

            //3. 콘솔창 출력
            console.log('테스트');
        </script>
    </head>
    <body>
        
    </body>
</html>

6.문자열과 숫자

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JS기본문법과 변수</title>
        <script>
            //1. 숫자 - 그냥 작성
            document.write(100);

            //2. 문자열 - 따옴표 내부에 작성
            document.write('안녕하세요');
            document.write('<a href="#">링크태그</a>');

            //키워드 : 자바스크립트 예약어 - 의미를 담아둔 단어 - 따옴표내부에 작성하지 않음
            //식별자 : 개발자가 만드는 이름 - 따옴표내부에 작성하지 않음
            //        ex) 변수명,함수명, 객체명 등등
        </script>
    </head>
    <body>
        
    </body>
</html>

7.사칙연산자

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JS기본문법과 변수</title>
        <script>
            alert(10 + 10); //더하기 연산자
            alert(10 - 10); //빼기 연산자 
            alert(10 * 10); //곱하기 연산자
            alert(10 / 10); //나누기 연산자
            alert(10 % 3); //나머지 연산자 (10을 3으로 나누고 남은 나머지 1)
        </script>
    </head>
    <body>
        
    </body>
</html>

8.연결연산자

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JS기본문법과 변수</title>
        <script>
            alert(10 + 10); //더하기 연산자 - 좌변우변이 모두 숫자일때
            alert(10 + '10'); //연결 연산자 - 좌변과 우변 중 하나라도 숫자가 아니면 값을 연결해서 붙여줌
        </script>
    </head>
    <body>
        
    </body>
</html>

9.bool

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JS기본문법과 변수</title>
        <script>
            //불(boolean) : 결과값이 true혹은 false로 나오는 것
            alert(10 > 5); //true
            alert(10 < 5); //false

            //true : 맞다! 라는 키워드
            //false : 틀리다! 라는 키워드
            alert(true);
            alert('true');
        </script>
    </head>
    <body>
        
    </body>
</html>

10. 비교연산자

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JS기본문법과 변수</title>
        <script>
            //비교연산자 : 좌변과 우변을 비교해서 true혹은 flase의 값을 반환하는 연산자

            console.log(10 > 5); //크다, 초과
            console.log(10 >= 5); //크거나 같다, 이상
            console.log(10 < 5); //작다, 미만
            console.log(10 <= 5); //작거나 같다, 이하
            console.log(10 == 5); //같다, 항등연산자
            console.log(10 != 5); //같지않다, 불항등연산자
            
            
        </script>
    </head>
    <body>
        
    </body>
</html>

11.이퀄연산자

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JS기본문법과 변수</title>
        <script>
            a = 10; //1. = : 좌변에 우변값을 대입 (대입연산자)
            10 == 10; //2. == : 항등연산자, 데이터유형과는 관계없이 값이 맞으면 true, 그렇지 않으면 false반환
            10 === 10; //3. === : 완전항등연산자, 데이터유형과 값 모두가 맞으면 true, 그렇지 않으면 false반환

            alert(10 == '10'); //true
            alert(10 === '10'); //false (데이터 유형이 다르기때문)
            alert(0 == false); //true
            alert(0 === false); //flase (데이터 유형이 다르기때문)            
        </script>
    </head>
    <body>
        
    </body>
</html>

12.변수의 선언

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JS기본문법과 변수</title>
        <script>
            //상수 : 절대 안바뀌는 값
            //변수 : 값을 한개 저장하는 공간 (바뀌는 값)
            
            //1. 변수 선언
            var test; //(키워드와 식별자는 ""안에 적지 않는다)
            
            //2. 값을 할당
            test = 10; //(대입 연산자)
            
            alert(test); //10

            //3. 변수 초기화 : 선언하면서 바로 값을 할당
            var num = 100;
        </script>
    </head>
    <body>
        
    </body>
</html>

13.변수의 사용이유

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JS기본문법과 변수</title>
        <script>
            //변수사용이유
            //1. 값이 변할지도 모르니까
            //2. 식이 너무 길어서

            //원달러 변수 선언
            var dollar = 1442;

            alert(1 * dollar);
            alert(2 * dollar);
            alert(3 * dollar);
            alert(4 * dollar);
            alert(5 * dollar);
        </script>
    </head>
    <body>
        
    </body>
</html>

14.변수의 재선언

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JS기본문법과 변수</title>
        <script>
            //JS는 재선언해도 틀리진 않지만, 안하는 것이 좋음
           
            /* var cup = '아메리카노';
            var cup = '물';
            var cup = '녹차'; //마지막 언어를 출력

            alert(cup); //녹차 */

            //변수를 재활용
            var cup ='아메리카노';
            cup = '콜라' //재할당

            alert(cup); //콜라

            var cup01 = '아메리카노';
            var cup02 = '카페라떼';
            var cup03 = '카라멜마끼야또';

            alert(cup01); //아메리카노
            alert(cup02); //카페라떼
            alert(cup03); //카라멜마끼야또
        </script>
    </head>
    <body>
        
    </body>
</html>

15.prompt함수

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JS기본문법과 변수</title>
        <script>
            //prompt() : 사용자가 값을 입력할 수 있는 창을 띄워주는 함수
            prompt('정수를 입력하세요!' , '정수입력'); //(input type = text대신 사용)

            
        </script>
    </head>
    <body>
        
    </body>
</html>

16.변수데이터의 유형

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JS기본문법과 변수</title>
        <script>
            var num = 10; //1. 숫자
            var str = '안녕하세요'; //2. 문자열
            var bool = true; //3. 불
            var fx = prompt('테스트');  //4. 함수 - prompt는 값을 문자열로 반환
            var obj = document; //5. 객체
            var test; //6. undefined : 값을 할당받지 못한 상태

            alert(test);
        </script>
    </head>
    <body>
        
    </body>
</html>

17.환율계산기 만들기

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JS기본문법과 변수</title>
        <script>
            //1. 변수선언
            var dollar = 1442;
            var num = prompt('환전할 달러를 입력하세요' , '정수입력');

            alert('환전금액 :' + (dollar * num) + '원');
        </script>
    </head>
    <body>
        
    </body>
</html>

18.형변환

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JS기본문법과 변수</title>
        <script>
            //더하기 계산기 만들기
            var left = prompt('좌변입력' , '정수입력');
            var right = prompt('우변입력' , '정수입력');

            /*
                '10' + '10' = '1010로 처리'
                alert('결과 : ' + (left + right)); 
                
                문자였던 데이터유형을 숫자로 변환해야함
            */
            
            //문자열을 숫자로 변경 : Numbar(문자열)

            var result = Number(left) + Number(right);
            
            alert('결과 : ' + result);
            

            //식별자 작성규칙 ex) 변수명, 함수명, 객체명 등
            //1. 영어 대소문자는 구분 all ≠ ALL (같지않다)
            //2. 특수문자는 [_]과 [$]만 사용가능
            //3. 공백(띄어쓰기) X
            //4. 키워드 작성 X
            
            //관례
            //1. 문자는 영어만 작성
            //2. 숫자는 영문뒤에 작성
            //3. 카멜표기법 : 단어 + 단어 : 두번째단어의 첫글자를 대문자로 사용
            //   ex) sum + all -> sumAll
        </script>
    </head>
    <body>
        
    </body>
</html>

19.응용문제(평균 도출하기)

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JS기본문법과 변수</title>
        <script>
            //사용자에게 국어, 영어, 수학점수를 입력받아 평균을 도출하시오.
            //경고창 출력
            //평균 : xx.xxxxx점

            var ko = prompt('국어점수를 입력해주세요' , '입력');
            var en = prompt('영어점수를 입력해주세요' , '입력');
            var ma = prompt('수학점수를 입력해주세요' , '입력');

            var avg = (Number(ko) + Number(en) + Number(ma)) / 3;
            
            alert('평균점수는 : ' + avg + '점 입니다.');
        </script>
    </head>
    <body>
        
    </body>
</html>
저작자표시

'javascript&jquery' 카테고리의 다른 글

[Vanilla JS]study 3일차 - 반복문  (0) 2022.11.24
[Vanilla JS]study 2일차 - 조건문  (0) 2022.11.23
[javascript]플러그인 없이 슬롯 머신 만들기  (0) 2022.10.20
[jQuery] 플러그인 없이 slide만들기  (0) 2022.10.12
[jQuery] css 변경하기 (추가, 수정, 삭제)  (0) 2022.10.12
'javascript&jquery' Related Articles more