자바스크립트 기초 문법

Javascript 2023. 6. 22. 15:17

자바 스크립트 선언문

기본형

자바스크립트 코드;

</script>

자바 스크립트 주석 처리

자바 스크립트에서는 // 로 주석 처리한다

(설명이 여러 줄 일 경우 /* */로 주석 처리 함)

내부 스크립트 외부로 분리하기

-자바 파일 경로 연결

예제) java script (환영합니다만 출력)

<!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>
    <script>
        // document 객체, write : 메소드, 한줄주석 //
        // 객체는 현실에 존재하는 사람 or 사물, 메소드는 기능(동작)
        // write 메소드는 웹 브라우저에 출력 -> 형식은 괄호(빈괄호 or 비어있지 않는 괄호)
        // 문장의 끝에는 세미클론
        // document.write();  아무것도 출력 안됨    
        // document.write("");    아무것도 출력 안됨
        document.write("환영합니다");  //출력됨
    </script>
</head>
<body>
    
</body>
</html>

- 코드 입력시 주의할 점

자바 스크립트는 대,소문자를 구분하여 작성
코드 한줄을 작성한 후에는 세미클론( ; )을 쓰는것이 좋음
코드를 작성할 때는 한줄에 한 문장만 작성하는것이 가독성을 위해 좋음
문자형 데이터를 작성 할때는 큰따옴표와 작은따옴표의 겹침 오류를 주의해야 함
코드를 작성할 때 중괄호 또는 소괄호 의 짝이 맞아야 함

변수

var box; ← 변수 선언

변수는 데이터를 담을 수 있는 그릇

예제) 변수 var (변수 선언만)

<!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>
    <script>
        // var box;        //box 변수 선언
        // box = 100;
        var box = 100;      //변수 선언과 초기값 설정
        // box = 30;       // 값이 계속 바뀔수 있음
        var box = 50;       // 값이 계속 바뀔수 있음(자바에서는 오류)
        document.write(box);        //undefined : 선언만 했을때
    </script>
</head>
<body>
    
</body>
</html>

연산자

문자형 데이터 var ste = “hello”;
숫자형 데이터 var num = 100;
논리형 데이터 var bool = true or false;
undefined var num; // undefined
null var num = null;

예제) boolean (null 값을 거짓으로 판별)

<!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>
    <script>
        var a = true;               //스페이스로 띄워져 있어도 상관없음
        var b = false;             
        var c = 10 > 5;
        // Boolean : 참/거짓에 대한 데이터 타입
        var d = Boolean(null);       //null 값을 거짓으로 판별
        document.write(a,"<br>");
        document.write(b,"<br>");
        document.write(c,"<br>");
        document.write(d,"<br>");

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

boolen(null) - 값을 아무것도 주지 않겠다(거짓)

산술 연산자

예제) 대입 연산자

<!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>
    <script>
        var num1=15;
        var num2=2;
        var result;
        result = num1 + num2;
        document.write(result,"<br>");
        result = num1 - num2;
        document.write(result,"<br>");
        result = num1 * num2;
        document.write(result,"<br>");
        result = num1 / num2;
        document.write(result,"<br>");
        result = num1 % num2;
        document.write(result,"<br>");
    </script>
</head>
<body>
    
</body>
</html>

문자 연산자

문자형 데이터 + 문자형 데이터 = 하나의 문자형 데이터
문자형 데이터 + 숫자형 데이터 = 하나의 문자형 데이터
즉, 문자형이 하나라도 더해지면 문자형 데이터가 된다.

예제) type (문자열이 하나라도 더해지면 문자열로 출력)

<!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>
    <script>
        var num=100;
        var num2="100";
        var str ="자바스크립트";
        // num 변수값은 숫자형
        document.write(typeof num,"<br>");
        // num 변수값은 문자형
        document.write(typeof num2,"<br>");
        document.write(typeof str,"<br>");
    </script>
</head>
<body>
    
</body>
</html>

대입 연산자

예제) 100의자리,10의자리 숫자만 빼내는법

<!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>
    <script>
        var n= prompt("3자리수 정수 입력(100~999");
        //100의 자리수
        // var hundred = Math.floor(n/100);
        // var hundredRest = n%100;
        //10의 자리수
        // var ten = Math.floor(hundredRest/10); 333
        //1의 자리수
        // var one = hundredRest%10;

        // var sum = hundred + ten;
        // var multiply = ten * one;

        // document.write("100의 자리와 1의 자리의 합은" + sum,"<br>")
        // document.write("100의 자리와 10의 자리의 곱은" + multiply,"<br>")



         var n = prompt("3자리 정수 입력(100~999)");
         var a = Math.floor(n/100);
         var b = Math.floor(n/10-a*10);
         var c = n%10;

        //  var d = a+b;
        //  var e = b*c;
         var result = a+b;
         document.write( result,"<br>");
         var result = b*c;
         document.write( result);
    </script>
</head>
<body>
    
</body>
</html>

증감 연산자

var A = ++B : 처음부터 B+1이 되어서 +1씩 점점 증가한다.

var A = B++ : 처음에는 B값이 나오고 점점 증가한다.

예제) 증감 연산자

<!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>
    <script>
        var num1=10;
        var num2=20;
        var result;
        num1--;
        document.write(num1,"<br>");
        num1++;
        document.write(num1,"<br>");

        // result = num2++; //20
        result = ++num2; //21
        document.write(result,"<br>")
    </script>
</head>
<body>
    
</body>
</html>

논리 연산자

삼항 조건 연산자

기본형 : 조건식 ? 코드1 : 코드2 ;

ex) var result = a>b ? “javascript” : “hello”

  a가b보다 클때 true 값으로 javascript 가 출력되며,

  a가b보다 작으면 false 값으로 hello가 출력된다.

예제) 삼항 연산자

<!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>
    <script>
        var a =-10;
        var b =3;
        // 조건과 물음표와 콜론 : 삼항(조건)연산자
        // javascript : 참일때 출력
        // hello : 거짓일때 출력
        var result = a>b ? "javascript" : "hello";
        document.write(result);
    </script>
</head>
<body>
    
</body>
</html>

'Javascript' 카테고리의 다른 글

Math, 시간 나타내기 (0)	2023.06.22
제어문 (0)	2023.06.22
자바 스크립트 시작하기 (0)	2023.06.22
JQuery (0)	2023.05.08
반복문 리스트, 토글 기능, 제이쿼리 (0)	2023.05.08

ABOUT ME

림이의 개발일지 림이의 개발일지

'Javascript' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'Javascript' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바