[JavaScript] JS 기본 문법

728x90

JavaScript

자바 프로토타입(기준이 되는 객체) 기반 객체지향 언어 + 함수형 언어
데이터 통신, 외부 데이터(카카오 지도 등) 가져올 때 사용
플랫폼에 독립적이고, 코드가 직접 html 문서에 삽입되어 브라우저에서 html 파일을 읽을 때 같이 해석되고 실행됨
클라이언트에서만 실행되기 때문에 정보를 서버에 보낼 필요 없이 처리 가능
바로 화면에 나타나는 것을 볼 수 있음

< 특징 >

변수들의 타입에 있어 차이 x
순수 스크립트의 사용을 선호 → java보다 확장성이 뛰어남 (유연함)
사용방법이 다양

< script 언어 >

인터프리터 언어: 어플리케이션이 실행되는 동안 라인 단위로 해석되어 실행되는 언어
한 줄씩 치면 바로 결과가 들어옴 ( ↔ java는 컴파일 언어)

// script 언어는 html 문서 내에서 script 사이에 작성해야 함

<script> 여기에 작성 </scrip>

< 참고 사이트 >

https://www.w3schools.com/js/default.asp

JavaScript Tutorial

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

https://developer.mozilla.org/ko/docs/Learn/JavaScript

기본구조

사용방법

<!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>
</head>
<body>
    
    <script>
        document.write("<h2>여기에 작성하세요</h2>");
    </script>

</body>
</html>

자바스크립트를 외부 파일로 사용되는 경우

css의 외부스타일 시트 방법과 동일
스크립트의 링크는 반드시 head는 아니고, body에서 중간중간 들어가도 됨
링크의 순서 중요!
위쪽에 걸면 먼저 동작, 아래쪽에 걸면 마지막에 동작
화면이 있냐 없냐에 따라서 동작 할 수도 안 할 수도 있음

css ▶ link 걸기
js ▶ script 걸기

<script type="text/javascript" src="호출할 자바스크립트 파일명.js"> </script>

매개변수, 반환 등 확인방법

기본문법

문장끝에 세미콜론(;) 입력, 생략가능 but 오류방지를 위해 권장
주석은 java와 같음

변수

var 키워드 이용 (variable)
동일한 변수 선언 허용 o
최종적으로 마지막이 저장됨

var num = 10;
var num = 20;
// 가능
// num은 20 나옴

let 키워드 이용
es6 문법에 추가된 변수
중복 변수의 선언을 허용 x

<!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>

    <!-- 외부 js링크 (상대 or 절대경로) -->
    <!-- js링크 순서는 반드시 head에만 있는 것이 아니고, 파일의 렌더링 순서에 따라 달라질 수 있음 -->
    <script src="index01.js"></script>

</head>
<body>
    
    <script>
        //동일 변수의 선언 가능. 단, 주의필요
        var a = 20;
        var a = 10;
        a = 100; //변수의 변경

        console.log(a); //콘솔 출력
        document.write(a); //html 화면 출력(많이 사용x)
        alert(a); //경고창
        confirm(a); //확인창
    </script>

</body>
</html>

출력

문법이 틀리면 화면상 표시x
개발자 도구 F12에서 확인

분류	명령어
출력	document.wirte("브라우저 출력");
	alert("경고창 출력");
	console.log("콘솔창 출력");
확인	confirm("확인창 출력");

데이터 타입

기본타입

숫자 (number)	정수, 실수 구분x
문자열 (string)	문자, 문자열 구분x 쌍따옴표(" "), 홑따옴표(' ') 아무거나 묶어도 됨
boolean	false: 비교 결과가 0, null, " "(빈 문자열), false, undefined, NaN true: 나머지 동등 비교를 할 경우 타입고 같이 비교해주는 === 사용 권장
undefined	변수 선언o, 초기값 x boolean - false 반환 숫자 - NaN 반환 문자열 - undefined 반환
null	값 저장x, 초기값 o
typeof	console.log (typeod 타입); //타입을 나타냄 ex) null값은 object로 표시

참조타입

배열	[ ] 로 표기
객체	{ } 로 표기

형변환

parseInt (값)
parseFloat (값)

<!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>
</head>
<body>

    <script>
        var num1 = "10"; //문자 "" ok
        var num2 = '10'; //문자 '' ok
        var num3 = 10; //숫자
        
        //변수의 변경 - 타입을 지키지 않아도 됩니다.
        num1 = 3.14;
        num2 = 10;
        num3 = '10';

        //숫자 + 숫자 = 숫자, 숫자 + 문자 = 문자
        var result = num1 + num2 + num3;
        console.log(result);
        console.log(10 + 3.14); //13.14
        console.log(20 + '20'); //2020
        console.log(10 + undefined); //NaN → 잘못된 연산

        //데이터타입 number, str, boolean, undefined, null
        var bool = true; //false
        console.log(bool);

        //undefined - 초기값을 지정하지 않으면 나타납니다.
        var un;
        console.log(un);

        //null - 초기값을 지정했는데, 값이 존재하지 않을 때 나타납니다.
        var tag = document.getElementById("a");
        console.log(tag);

        //키워드 - typeof
        console.log( typeof num1 );
        console.log( typeof num3 );
        console.log( typeof bool );
        console.log( typeof un );
        console.log( typeof tag ); //obj
    </script>
    
</body>
</html>

연산자

기본적으로 자바와 동일
삼항연산자 사용 가능
===, !== 는 더 엄격한 비교연산자

값 동일	==	!=	10 == '10' 이면 true (값 같음)
값 동일, 타입 동일	===	!==	10 === '10' 이면 false (값 같음, 타입 다름)

<!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>
</head>
<body>
    
    <script>
        var num1 = "10";
        var num2 = 10;

        console.log( num1 == num2 ); //t (값만 비교)
        console.log( num1 != num2 ); //f

        console.log( num1 === num2 ); //f (값과 타입까지 비교)
        console.log( num1 !== num2 ); //t

        var a;
        var b = null;

        console.log(a, b, a==b); //t - 값만 비교
        console.log(a, b, a!=b); //f
        console.log(a, b, a===b); //f - 값과 타입 비교
        console.log(a, b, a!==b); //t
    </script>

</body>
</html>

배열

[ ]로 묶어주기만 하면 됨
배열의 저장은 (자바와 다르게) 타입과 상관x

var arr = []; // 빈 배열
var arr2 = [1 ,2, '가', '나']; //선언 및 생성, 타입 상관x

var arr3 = new Array(); // 빈 배열
var arr4 = new Array(3); // 크기 3인 배열
var arr5 = new Array(1, 2, 3); //크기 3, 초기값 1,2,3인 배열

배열의 함수

// 배열 길이
arr.length();

// 배열의 마지막에 추가
arr.push();

// 배열의 마지막 요소 제거
arr.pop();

// 배열의 첫번째 요소 추가
arr.unshift(값1, 값2);

// 배열의 첫번째 요소 제거
arr.shift();

// 배열의 중간에 추가 삭제
arr.splice(인덱스값, 삭제할 개수);

arr.splice(인덱스값, 삭제할 개수, 추가 할 배열값);

arr.splice(인덱스값, 0, 추가 할 배열값); //삭제없이 추가만

// 배열 정렬 → 사전 등재순 (reverse: 사전등개 거꾸로)
arr.sort();

arr.reverse();

// 배열 탐색 → 발견된 인덱스 위치 나옴
arr.indexOf(탐색할 배열값);

arr.indexOf(탐색할 배열값, 찾기 시작할 인덱스 값); //값이 없으면 -1 반환

// 배열 합치기 (arr + arr2)
arr.concat(arr2);

MDN의 array에서 찾아서 사용
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

Array - JavaScript | MDN

JavaScript Array 클래스는 리스트 형태의 고수준 객체인 배열을 생성할 때 사용하는 전역 객체입니다.

developer.mozilla.org

<!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>
</head>
<body>
    
    <script>
        //배열의 선언 방법1 - 보통 이 방법 사용
        //[] 로 표현합니다

        var arr = [1, 2, 3];
        console.log(arr);

        var arr2 = ['a', 'b', 'c'];
        console.log(arr2);

        var arr3 = [1, 2, 3, 'a', 'b', 'c'];
        console.log(arr3);

        //배열의 사용
        console.log(arr[0]);
        console.log(arr[1]);
        console.log(arr[2]);
        arr[0] = 100; //값의 변경
        console.log(arr); //찍어봐야 나옴

        console.log('----------------------------------------------------');
        
        //배열의 선언 방법2
        var arr = new Array(); //빈 배열
        console.log(arr);

        var arr2 = new Array(10); //크기가 10인 배열
        console.log(arr2);

        var arr3 = new Array(1, 2, 3); //크기와 초기값 할당된 배열
        console.log(arr3);

        //배열의 길이확인
        console.log('배열의 길이:', arr3.length);
    </script>

</body>
</html>

<!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>
</head>
<body>
    
    <script>
        //배열을 조작하는 다양한 함수
        //MDN

        var arr = [1, 2, 3, 4, 5];
        
        //배열 마지막에 추가 push();
        arr.push(6);
        console.log(arr);

        //배열 마지막 요소 제거 pop();
        arr.pop();
        console.log(arr);
        
        //배열의 첫번째 요소 추가 unshift();
        arr.unshift(7, 8, 9); //7, 8, 9, 1, 2, 3, 4, 5
        arr.unshift([1, 2]) //Array(2), 7, 8, 9, 1, 2, 3, 4, 5
        console.log(arr);

        //배열의 첫번째 요소 제거 shift();
        arr.shift(); //7, 8, 9, 1, 2, 3, 4, 5
        console.log(arr);

        //배열의 중간에 추가 삭제 splice()
        arr.splice(2, 1); //2번 인덱스의 1개 삭제
        console.log(arr); //7, 8, 1, 2, 3, 4, 5

        arr.splice(2, 1, 'a'); //2번 인덱스의 1개 삭제, 'a' 추가
        console.log(arr); //7, 8, 'a', 2, 3, 4, 5

        arr.splice(2, 0, 'b'); //2번 인덱스 0개 삭제, 'b' 추가
        console.log(arr) //7, 8, 'b', 'a', 2, 3, 4, 5

        //배열 정렬 → 사전 등재순
        arr.sort(); //2, 3, 4, 5, 7, 8, 'a', 'b'
        console.log(arr);

        arr.reverse(); //'b', 'a', 8, 7, 5, 4, 3, 2
        console.log(arr);

        //배열의 탐색
        console.log(arr.indexOf('a')); //발견된 위치 1
        console.log(arr.indexOf('a', 2)); //2번째 위치에서부터 a를 탐색, 값이 없다면 -1 반환

        if(arr.indexOf('a') != -1) { //이렇게 사용, arr배열에 a가 존재한다면~
        }

        //배열 합치기
        var arr2 = ['가', '나', '다'];
        var newArr = arr.concat(arr2); //'b', 'a', 8, 7, 5, 4, 3, 2, '가', '나', '다'
        console.log(newArr); 

        //filter, foreach, join, map
    </script>

</body>
</html>

조건문

if else
switch

<!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>
</head>
<body>
    
    <script>
        var num1 = 1;
        if(num1 >= 10) {
            console.log('10보다 큼');
        } else {
            console.log('10보다 작음');
        }

        //형번환 parseInt(값), parseFloat(값)
        var a = parseInt(Math.random() * 101); //정수값만 받아옴

        console.log(a);

        if( a >= 90 ) {
        } else if ( a >= 80 ) {
        } else {
        }

        var b = '가';
        switch (b) {
            case '가':
                console.log('가 입니다');
                break;
            case '나':
                console.log('나 입니다');
            break;
            default:
                break;
        }
    </script>

</body>
</html>

반복문

while
for

for in (= 향상된 for문)

java script	for ~ in문	배열: index 번호 담음
java script	for ~ in문	객체: key 담음
java	향상된 for문	값 담음

i는 인덱스를 담아줌!!!

<!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>
</head>
<body>
    
    <script>
        //while문
        // var a = 1;
        // while(a <= 10) {
        //     console.log(a);
        //     a++;
        // }

        //for문
        // for(var a = 1; a <= 10; a++) {
        //     console.log(a);
        // }

        //배열과 for문
        // var arr = [1, 2, 3, 4, 5];
        // for(var i = 0; i < arr.length; i++) {
        //     console.log( arr[i] ); //배열의 요소값 찍기
        // }

        //빈 배열을 하나 생성하고, 1~10까지 값을 반복문으로 추가
        var arr = new Array();
        
        for(var i = 1; i <= 10; i++) { //push 사용
            arr.push(i);
        }
        console.log(arr);

        for(var i = 0; i < 10; i++) { //자바 기본문법 사용
            arr[i] = i+1;
        }
        console.log(arr);

        //구구단 2~9단 출력
        for(var i = 2; i <= 9; i++) {
            console.log(i + '단');
            for(var j = 1; j <= 9; j++) {
                console.log(i + 'X' + j + '=' + i*j);
            }
        }
    </script>

</body>
</html>

<!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>
</head>
<body>
    
    <script>
        //for ~ in

        //배열에서는 index를 담는다.
        var arr = [1, 2, 3, 4, 5];
        for( var i in arr ) {
            // console.log(i); //i는 인덱스
            console.log(arr[i]); //배열의 요소값
        }
        
        //객체에서는 키를 담는다.
        var obj = { a : '1', b : '2' };
        for(var i in obj) {
            // console.log(i); //i는 key를 담음 (a, b)
            console.log(obj[i]); //객체의 값 (1, 2)
        }
    </script>

</body>
</html>

탈출문

break
continue

<!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>
</head>
<body>
    
    <script>
        var arr = [1, 2, 3, 4, 5];
        
        for(var i = 0; i < arr.length; i++) {
            if(arr[i] === 3) {
                break;
            }
            console.log(arr[i]);
        } //1, 2 까지만 출력

        console.log('------------------------------------------');

        for(var i = 0; i < arr.length; i++) {
            if(arr[i] === 3) {
                continue;
            }
            console.log(arr[i]);
        } //1, 2, 4, 5 출력
    </script>

</body>
</html>

오늘 하루

기억에 남는 부분

어려운 부분

문제 해결 부분