221117 Visual Studio Code (이철희쌤 1일차)

Gukbbap·2022년 11월 17일
0

보강

목록 보기
1/7

Object와 Primative와의 구분 방법은?

java의 int는 원시타입이며 이유는 속성(method 포함)이 없기 때문이다.
	속성이 없는것을 원시타입이라고 명하며 속성이 있는것은 객체 타입이라고 한다.

Object와 Instance의 차이점

객체(Object)란 물리적으로 존재하거나 추상적으로 생각할 수 있는 것 중에서
	자신의 속성을 가지고 있고 다른 것과 식별 가능한 것
클래스가 붕어빵 틀이라면 그 틀을 통해 생성된 객체(붕어빵) 하나하나를
	해당 클래스의 인스턴스(Instance)라고 할 수 있다.

Java Script는 원시타입에 닷(.)을 붙이는 순간 Wrapper 객체로 변경시켜 준다.

Wrapper = 각도기와 같다.

래퍼 클래스(Wrapper class)

프로그램에 따라 기본 타입의 데이터를 객체로 취급해야 하는 경우가 있습니다.
	예를 들어, 메소드의 인수로 객체 타입만이 요구되면,
	기본 타입의 데이터를 그대로 사용할 수는 없습니다.
	이때에는 기본 타입의 데이터를 먼저 객체로 변환한 후 작업을 수행해야 합니다.
이렇게 8개의 기본 타입에 해당하는 데이터를
	객체로 포장해 주는 클래스를 래퍼 클래스(Wrapper class)라고 합니다.
    

JSON

JSON(JavaScript Object Notation 자바스크립트 객체)
Array도 포함된다고 생각하는 것이 정신건강에 좋다.
    
    var name = "merong"; // merong을 추가하더라도 출력에 변경되는 사항은 없다.
    var vJson={
    	name:"허지현", // 속성명은 자동으로 문자열 처리가 되기 때문이다.
        age:"I don't Know"
     }
     alert(vJson.name);
     alert(vJson.merong);
     
     //alert(vJson.name); -->  허지현이라는 alert창이 출력 될 것이고
     //alert(vJson.merong); --> 속성값이 없기 때문에 undifinder가 출력될 것이다.
     
    
    // var vJson1 = {}; //new Object()와 같은 표현
    // vJson1.name = "허지현2";
    // vJson1.age = "20";

JSON의 배열식 접근법(연관배열이라고도 부름)은 꼭
모르면 삶이 힘들다.

	var vJson2 = {
      ["name"] : "오용택",
      ["age"] : 100
    }

alert(vJson2.age);
alert(vJson2["name"]);
// 닷(.)으로 접근되는것이 성능 향상에 도움이 되지만
//  에러가 발생될 경우 [" "] 형식의 배열식 접근도 도움이 된다.
// 배열식으로 접근하게 되면 동적인 접근명도 사용 할 수 있다.
// Script는 0 과 같은 숫자를 변수명으로 사용할 수 없지만 배열식으로 사용하게 되면
	--> ["0"] 과 같은 표현으로 배열식 접근을 통해 변수명으로 사용할 수있게 된다.

자바스크립트를 무조건 잘 해야 하는 이유?

백엔드 언어는 많이 존재하지만, 프론트(웹) 언어는 오직 자바스크립트 1개만이 존재한다.
언어적인 성장역시 자바스크립트가 가장 많이 성장하는 추세이다.

https://trends.google.co.kr/trends/?geo=KR

파이썬의 경우 중,고등학교에서 교육을 시작했기 때문에 급등하고 있는 상황이고
jQuery는 감소되고 있으며
java script의 경우 java 와 함께 증감을 같이하고 있는 추세이다.

자바스트립트는 function 키워드만 잘 넘기면 더이상 벽이 없다(자유로워짐).

JSON 테스트

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
 <div id="disp"></div>
<script>
    var vMembers = [
        {name:"로제",level:"100"},
        {name:"제니",level:"200"},
        {name:"리사",level:"300"},
        {name:"뷔",level:"200"},
        {name:"정국",level:"300"},
    ];

    var vPosition = {
        "100":"사장님",
        "200":"부장님",
        "300":"그냥사원"
    }

    var vDisp = document.querySelector("#disp");

    var vTblStr = "<table border=1 width=400>";
    vTblStr += "<tr><th>순번</th><th>이름</th><th>직위</th></tr>";
    for(var i=0; i< vMembers.length; i++){
        vTblStr +="<tr>";
        vTblStr += "<td>" + (i+1) + "</td>";
        vTblStr += "<td>" + vMembers[i].name + "</td>";
        vTblStr += "<td>" + "오케?" + "</td>";
        vTblStr +="<tr>";
    } 
    vTblStr +="</table>";
    vDisp.innerHTML = vTblStr;   
  // "오케" 부분에 직위가 찍히도록 해 봄당.
  // 여긴 403호니깡, 4+0+ 3 = 7초 !

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
 <div id="disp"></div>
<script>
    var vMembers = [
        {name:"로제",level:"100"},
        {name:"제니",level:"200"},
        {name:"리사",level:"300"},
        {name:"뷔",level:"200"},
        {name:"정국",level:"300"},
    ];

    var vPosition = {
        "100":"사장님",
        "200":"부장님",
        "300":"그냥사원"
    }

    var vDisp = document.querySelector("#disp");

    var vTblStr = "<table border=1 width=400>";
    vTblStr += "<tr><th>순번</th><th>이름</th><th>직위</th></tr>";
    for(var i=0; i< vMembers.length; i++){
        vTblStr +="<tr>";
        vTblStr += "<td>" + (i+1) + "</td>";
        vTblStr += "<td>" + vMembers[i].name + "</td>";
        vTblStr += "<td>" + vPosition[vMembers[i].level] + "</td>";
        vTblStr +="<tr>";
    } 
    vTblStr +="</table>";
    vDisp.innerHTML = vTblStr;   
  // "오케" 부분에 직위가 찍히도록 해 봄당.
  // 여긴 403호니깡, 4+0+ 3 = 7초 !

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


1차 변경 후에

이렇게 2차로 변경 하면
직위부분이 포지션 명으로 변경됨


스크립트에서 this란 것에 대해 생각해봅시다.

<!DOCTYPE html>
<meta charset="UTF-8">

<body>
    <input type="button" value="누르숑" id="btn">
</body>
<script>
    // 키워드만 잘 기억~~  잘 검색하고 연습
    // 최종적으로 jQuery 만들고 끝
    var vBtn = document.querySelector('#btn');

    function f_click(p_name){
        alert(p_name+" 너 지금 나 눌렀엉");
        cnosole.log(this);
    }

    //vBtn.addEventListener("click",f_click.call(document,"로제"));
    // call은 함수를 호출함
    // bind는 내부적으로 새로운 함수(복사한 다음 매개변수 넣은)
    // 를 만들어서 그 함수의 포인터를 리턴해 줌
    // bind를 써야 하는 경우가 자주 발생하진 않지만, bind를 모르면
    // 상황이 아주 힘들어짐 (소스 대부분을 고쳐야 하는 구조적 개선)

// 프로그램 사용스타일(Context맥락)에 따라 this가 가르키는 값이 달라지는 문제점에 대응, 
// 개발자가 강제로 this가 가르키는 값을 지정할 수 있는 3개의 메소드를 제공 : call, apply, bind

function f_this(p_arg1,p_arg2){
    console.log(this);
    console.log("매개변수 확인 : ",p_arg1,p_arg2);
}

f_this();

var vobj1 = { name :"로제"};
var vobj2 = { name :"제니"};

f_this.call(vobj1, "나", "열");
f_this.apply(vobj2, ["나","열"]);

/*
//var myName="정경환";
window.myName = "정경환";
//alert(myName);

//this(이것,나)?
function f_this(){
    console.log(this); 
    return "요한만만세";
    //return    // 만약 개발자가 return을 하지 않는 이상 자동으로 return이 들어간다.
    // return을 입력하지 않아도 자동으로 return이 된다는 이야기다.
} 

var vYuHwa = {
    name:"유화"
}

vYuHwa.print = f_this(); // 함수뒤에 () 를 붙이는 이유는 함수를 실행하라는 명령이다.
                         // 함수이름을 FP(Function Pointer)라고 부름
alert(vYuHwa.print); //print 뒤에 ()를 붙이게 되면  f_this()가 가르키는 function f_this()를 실행하고
                     // print 는 vYuHwa를 계속 가르키게 된다.




window.f_this = function(){
    console.log(this);
}
*/

//f_this();
</script>
profile
Johannes

0개의 댓글