JavaScript Basic

Let's Just Go·2022년 6월 13일
JavaScript
0

JavaScript

목록 보기
1/10

JavaScript

Basic

  • JavaScript
    • 웹페이지에 생동감을 불어 넣기 위해 만들어진 프로그래밍 언어
    • HTML, CSS와 함께 웹을 구성하는 언어로 웹 브라우저에서 동작하는 유일한 프로그래밍 언어
    • 별도의 컴파일을 수행하지 않는 인터프리터 언어
    • JavaScript 엔진(JavaScript를 해석하고 실행)을 각 브라우저가 가지고 있으므로 브라우저를 통해 결과를 확인할 수 있음
  • 변수 선언

    • JavaScript 고유 태그를 활용하여 HTML에서 JavaScript 작성 가능

    • JS는 변수 선언을 var와 const, let으로 하고 변수 타입은 JavaScript가 자동 지정

      <!DOCTYPE html>
<html lang="ko">
<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 apple = '사과';
    var apple = '애플';
    console.log(apple);

    var banana = '바나나';
    var BANANA = '빠나나';
    console.log(banana);
    console.log(BANANA);

    var my_name = '홍길동';
    var $my_name = '홍길동';

    var myPhoneNumber = '01012345678'; // camel
    var my_phone_number = '01012345678'; // sanke
    var MyPhoneNumber = '01012345678'; // pascal
    var strMyPhoneNumber = '01012345678'; // hungarian

    </script>

</body>
</html>

    • 타입

      • number : 숫자, 정수, 실수 구분 X

      • string : 텍스트 문자열

      • boolean : 논리적 참과 거짓

      • undefined : 값이 할당하지 않은 변수에 암묵적 할당 값

      • null : 값이 의도적으로 없다는 것을 명시할 때 사용하는 값

      • symbol : ES6에서 추가된 타입


Array

  • Array

    • java와 다르게 JavaScript 배열은 길이 추가 가능

    • 배열의 인덱스로 접근하여 값 추가 및 수정 가능

    • 배열은 1차원만 가능한 것이 아니라 무수한 차원을 표현할 수 있음

      <!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 fruits = ['딸기', '포도', '복숭아', '사과'];

        // 배열의 길이 확인 
        console.log('배열의 길이 : ' + fruits.length);

        // 배열 데이터 수정 
        fruits[2] = '수박';

        // 배열 데이터 추가 
        fruits[4] = '파인애플';
        // java에서는 안되지만 JS에서는 array 길이 추가 가능

        // 배열 데이터 확인 
        console.log(fruits);

        // 배열 마지막 추가 (인덱스 모를 때 )
        fruits[fruits.length] = '맹고';
        
        // 배열 요소 참조 
        var apple = fruits[3];

        // 배열의 반복문 처리 
        for (i = 0; i < fruits.length; i++){
            console.log(`${i+1}번째 과일 : ${fruits[i]}`);
        }

				// 학생들의 4과목 점수(국영수탐)
        var kim = [2, 6, 3, 5];
        var lee = [100, 89, 55, 67];
        var park = [24, 35, 46, 21];
        var student = [kim, lee, park];

        var ourstudentscores = [
            [2, 6, 3, 5],
            [100, 89, 55, 67],
            [24, 35, 46, 21]
        ]

		console.log(ourstudentscores);
        console.log(ourstudentscores[2]);
        // 3번째 학생의 전체 점수 
        console.log(ourstudentscores[2][2]);
        // 3번째 학생의 3번째 점수

				
        
    </script>
</body>

</html>

  • pop & push

    • pop() : 배열의 마지막 요소를 제거하고 제거한 요소를 반환

    • push() : 배열의 끝 위치에 요소를 추가

    • shift() : 배열의 첫번째 요소를 제거하고 제거한 요소를 반환

    • unshift() : 배열의 첫번째 위치에 요소를 추가

    • Code

      <!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 foods = ['볶음밥', '자장면', '짬뽕'];
        console.log(foods);

        // pop 
        var lastElement = foods.pop();
        // 짬뽕을 빼서 lastElement에 넣어줌
        console.log(lastElement);
        console.log(foods);

        // push 
        foods.push('파슷하');
        foods.push('보쌈');
        console.log(foods);

        // shift 
        var firstElement = foods.shift();
        console.log(firstElement);
        console.log(foods);

        // unshift 
        foods.unshift('마라탕');
        console.log(foods);

    </script>

</body>

</html>

  • 부가적인 함수

    • indexOf()

      • 배열 요소의 인덱스 반환
      • indexOf(’값’)은 배열 안의 값의 인덱스 번호를 반환
      • 값이 배열에 없으면 -1 반환

    • includes()

      • 배열에 요소가 존재하는지 확인
      • true or false를 반환

    • slice()

      • 배열을 잘라냄
      • slice(시작, 끝) : 시작부터 끝 미만까지

    • reverse()

      • 배열을 역순 배치

    • join()

      • 배열의 요소들을 연결한 문자열로 변환

    • concat()

      • 배열을 결합

    • splice()

      • 배열의 특정 요소를 제거
      • splice(시작인덱스, 개수) : 시작 인덱스부터 특정 개수만큼 삭제
      • splice(시작인덱스, 개수, ‘ ’) : 배열의 요소를 삭제할 수 있고 요소를 추가할 수 있음
      • 삭제할 개수를 0으로 지정하면 특정 위치에 값을 추가할 수 있음

    • Code

      <!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 foods = ['마라탕', '초밥', '오뎅', '돼지고기', '한우'];

        // indexOf()
        var idx = foods.indexOf('초밥');

        var result = foods.includes('돼지고기');
        console.log('탐색 결과 : ' + result);

        console.log('===========================================');

        var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

        // slice)_
        var sliced_arr = arr.slice(3, 7);
        console.log(sliced_arr);
        // 3,4,5,6 으로 slicing됨 
        // 3부터 7미만 

        // reverse()
        var copyArr = arr.slice(0);
        copyArr.reverse();
        console.log(copyArr);

        // join()
        var foodStr = foods.join();
        // 배열의 요소를 문자열로 연결
        console.log(foodStr)

        console.log('=====================================');
        

        // concat() 
        var arr1 = [10, 20, 30];
        var arr2 = [100, 300, 500];
        var concatArr = arr1.concat(arr2);
        console.log(concatArr);

		// splice() 
        var foods = ['마라탕', '마라샹궈', '양꼬치'];
        
        var delFood = foods.splice(1,2);
        console.log(delFood);
        console.log(foods);

        foods.splice(0,1, '치킨', '파슷하');
        // 0번 인덱스부터 1개를 지우고 치킨, 파스타 추가
        console.log(foods);

        foods.splice(2, 0, '피자');
        // 2번 인덱스부터 0개를 지우고 피자를 추가(위치를 지목해서 추가할 수 있음)

        foods.splice(2);
        console.log(foods);
        // 개수를 지정하지 않으면 시작 인덱스 뒤에 있는 요소 모두 삭제 

        foods.push('보쌈', '닭발', '대창');

        var input = '보쌈';
        var idx = foods.indexOf(input);
        // 인덱스 값 가져옴

        if (idx >= 0){
            foods.splice(idx, 1);
            // idx부터 값 하나만 삭제 
            console.log('삭제완료');
        }else{
            console.log('데이터가 없습니다.');
        }

    </script>

</body>

</html>

Object

  • Object 생성

    • JavaScript는 {property:value}로 Object 생성 가능

    • Obejct의 Property를 참조하기 위해서는 Object.property or Object[’property’]로 참조 가능

      <!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 dog = {
            name: '저글링',
            kind: '리트리버',
            age: 3,
            favorite: ['간식', '산책']
        };

        var cat = {
            name: '마린',
            kind: '페르시안',
            age: 2,
            favorite: ['낮잠', '츄르', '실뭉치']
        }
        console.log(cat);

        // 객체 프로퍼티 참조 
        console.log(dog.name);
        console.log(cat.name);
        console.log(cat.favorite[1]);

        dog.favorite.push('밥');
        // 객체 프로퍼티에 참조해서 값을 넣을 수 있음

        console.log(dog);

        console.log('===========================================');

        // 프로퍼티 참조 다른 방식
        console.log(dog.kind);
        console.log(dog['kind']);
        // 객체 참조를 여러 방식으로 할 수 있음

        // 프로퍼티 값 수정 
        dog.age = 5;
        cat.favorite[1] = '캣잎';

        console.log('====================================');

        // 프로퍼티 동적 추가 
        dog.owner = '이제동';
        cat.owner = '이영호';

        // 프로퍼티 삭제 
        delete dog.owner;
        console.log(dog);

        console.log('======================================');
        // for ~ in : 객체 반복문 사용  
        for (var key in dog) {
            console.log(key);
            console.log(dog[key]);
            // 진짜 dictionary네 
        }

        console.log('=======================================');

        // 객체의 프로퍼티 키의 존재 유무 확인(in 키워드)
        var flag = 'kind' in cat;
        console.log(flag);

        
    </script>
</body>

</html>
profile
Let's Just Go
안녕하세요! 공부한 내용을 기록하는 공간입니다.
다음 포스트

JavaScript Function & Variable

0개의 댓글