JavaScript: VanillaJs-DOM-#1-Basic

var x = 3;          //정수
var x = 3.6;        //실수
var x = 'A';        //문자
var x = "Hello";    //문자열

//변수 선언에 대한 표현으로 생성자 함수 키워드인 new를 생략할 수 있다.
//JS의 유연함을 볼 수 있다.
var x = 3;
var x = new Number(3);

//push, pop method를 이용한 데이터 관리 : stack
var nums = new Array();
nums.push(5);
nums.push(10);
nums.push(20);
/*
    적재(stack) 형태로 데이터가 쌓임.
    20
    10
    5
    pop을 이용, 데이터를 꺼내면 적재된 최신 순서부터 꺼내오며 꺼낸 데이터는 사라진다.
 */
var n1 = nums.pop(); // 20
var n2 = nums.pop(); // 10
var n3 = nums.pop(); // 5

//index를 이용한 데이터관리 : List
var nums = new Array();
nums[0] = 5;
nums[1] = 10;
nums[2] = 20;
//pop과 달리 값을 꺼내도 사라지지 않는다.
alert(nums[0]);//5

/*
    배열 선언방법
    다른 언어에서는 같은 타입의 데이터를 목록화 하는데,
    JS는 다른 타입의 데이터도 가능하다.
    단일한 값으로 제한하지 않아 배열 내 배열도 선언할 수 있다.
 */
var num = new Array(5); //5개의 공간
var num = new Array(5,10,21); //3개의 공간에 데이터
var num = new Array(5,10,21, "hello"); //타입체크는 typeof를 이용** 
var num = new Array(5,10,21, "hello", new Array(2,3,4)); 
nums[4][1]; // 배열 내 배열의 데이터 호출 시 : 3

//splice() 메소드를 이용한 데이터 관리 : List
var nums_splice = new Array(5,10,21,"hello", 33, 44, 55);

//(n) index n 이후 값 삭제
nums_splice.splice(1); 

//(n,m) index n번째 부터 m개 인자 삭제
nums_splice.splice(3,4); 

//(n,m,a) index n번째 부터 m개 인자 삭제하고 n번째 index에 a값 추가
nums_splice.splice(2,0,"hi"); 
console.log(nums_splice);

/* 
    자바스크립트에서의 객체
    1. 객체 생성
    2. 객체 정의
    Javascript  - prototype(JS객체지향 공부할 때 설명)
                - class(ES6버전 이상일 때 설명)

    JS는 맨땅에 객체를 생성한다.(생성)
    필요한 속성이 있으면 객체에 기능을 붙인다.(정의)
    때문에 동적인 객체라고 함(생성 후 정의)
 */

//객체를 만들었지만 아무런 속성이 없음.
var exam = new Object();

//1. 속성정의 : '.' 이용하여 속성정의(=expand object)
exam.kor = 30; 
exam.eng = 70;
exam.math = 80;

exam.kor = 20;
console.log(exam.kor + exam.eng);

//2. 속성정의 : '[ ]'
exam["jpn"] = 50;
var key = "jpn";

/*
    []내의 값은 문자열. exam.jpn 으로는 꺼낼 수 없다.
    exam의 '속성'을 '변수'를 키로 사용해서 꺼낼 때는
    '.' 방식으로 불가하며 '[]' 방식으로 꺼내야 한다.
    기본적으로 변수를 사용하지 않고 단순히 값을 꺼낼 때는 무조건 '.'를 이용한다.
 */
console.log(exam[key]); //50 정상출력
console.log(exam.key);  //undefined

/*
    변수의 종류(추가 설명 필요)
        var   : 함수범위 변수
        let   : 블록범위 변수
        const : 상수 변수
        
    데이터를 목록화
        선형(=Array)
        맵형(=Map)
            JAVA    : Map형(컬럼명으로 데이터구분)컬렉션, 선형(List형)컬렉션
            자료구조 : Hash형(식별자)
            JS      : Object(=Map형), 선형(=Array))
 */

/*
    Javascript Obejct
    앞서 언급한 것처럼 자바스크립트는 변수를 선언하고 값을 '대입'하는 것이 아니라
    아래와 같이 wrapper class를 선언하여 참조하도록 되어있다.
    하지만 이런 불편한 방식은 사용자에게 매력적이지 않다.
 */
var n = new Boolean(true);
var n = new Number(3);
var s = new String("hello");
var ar = new Array();
var ob = new Object();

//쉽게 표현하고 사용하도록 Javascript Object Notaion(Json)표기법이 적용된다.
var n = true;
var n = 3;

/*
    자바스크립트는 문자열을 표현할 때 "" 보다 ''으로 많이 쓴다.
    html내에 포함되는 언어이기 때문에 문서의 "" 안에 스크립트가 포함될 수 있는데  
    ""가 중첩된다면 충돌이 발새되기 때문이다.
 */
var s = "hello";
var s = 'hello';
var msg = "alert("안녕");"; //충돌

var exam = {}; //Object 선언 다른 방법
exam.kor = 20; //선언 후 초기화 방법-1
var exam = {"kor":30, "eng":40,"math":50}; //선언과 초기화를 동시에 할 수도 있다.
var ar = [3,4,5,6,exam,[7,8,9]]; //배열도 json 표기법
console.log(ar[5][1]); //배열 내 배열 출력
console.log(ar[4].math); //배열 내 객체 출력

//json은 중첩된 데이터의 구조도 쉽게 표현 가능
var notices = [{"id":1, "title":"hello1"},
                {"id":2, "title":"hello2"},
                {"id":3, "title":"hello3"}];
//두번째 객체 데이터 호출 EZ
console.log(notices[1].title);

//이슈상황 : 외부에서 넘겨받은 Json은 문자열로 감싸진다.
var noticetest = '{"id":3, "title":"hello3"}';

//문자열이기 때문에 데이터 호출이 되지 않는다.
console.log(noticetest.title);

/*
    eval() 함수 : 문자열로 표현된 JS코드를 실행하는 함수
    *가급적 사용을 지양한다.(참조-참고사항 : eval은 evil)
 */
eval('var x = 30');
console.log('x : '+x); //30

var notices1 = '[\
                    {"id":1, "title":"hello1"},\
                    {"id":2, "title":"hello2"},\
                    {"id":3, "title":"hello3"}\
                ]';
eval("var ar_noti = "+notices1+";");
console.log(ar_noti[1].id);

/*
    json parser
        eval은 자바스크립트의 코드를 실행해주는 역할일 뿐
        json의 데이터를 파싱해주는 함수는 아니다. 
        json 데이터객체로 바꿔주는 json parser가 있다.
        json.parse를 사용할 때는 반드시 속성명을 문자열("")로 감싸야한다
    
    json 표기법++ 
        속성명을 문자열 표현하거나 or 하지 않아도 된다.
        하지만 유효하지 않은 속성명인 경우 문자열로 표현한다.
        {"id":1, "title-2":"hello"}
 */
var data = JSON.parse('{"id":1, "title":"hello1"}');
console.log(data);

//반대로 json을 문자로 바꿔야할 때도 있다.
var data2 = {id:2, title:"hello2"};

var json = JSON.stringify(data2);
console.log(json);