반응형 컴퓨터/Front (Html, JS)47 [JavaScript] arrow function 뜻, 특징, 기존 function 과 차이점 (this 차이) 💜 요약 메소드의 this 엄마{} window 의 this window{} 전역 function 의 this window{} (=엄마{}) constructor 의 this instance (=새로 만들어지는 아가 object) eventListener 의 this e.currentTarget (=지금 이벤트가 동작하는 html 태그) arrow function 메소드의 this 바깥의 this 값 = window{} eventListener 의 this 바깥의 this 값 = window{} arrow function? arrow function 은 function 처럼 쓸 수 있는 ES6 신문법이다. // 일반함수 var 함수 = function() { } // arrow function var 함.. 2022. 7. 31. [JavaScript] 함수, function 뜻, 사용하는 이유 ES6 에서 arrow function 이라는 애가 나왔다. () => 이렇게 생긴 애인데 람다식 문법이랑 비슷하게 생겼다. 😫 그래서 arrow function 공부할 겸 함수 정리를 쭉 해보려구...🤔 함수 function 뜻 함수는 상자?.🎁 상자에 짐을 넣어놓을 수도 있고 꺼내 쓸 수도 있고 안에서 뭐 짐을 풀어놓거나 다른 짐이랑 합칠 수 있다.... 함수안에 그냥 데이터만 넣어놓을 수도 있고 데이터만 꺼내 쓸 수도 있고 파라미터 형태로 값을 넣고 기존의 데이터와 합칠 수 있다. (값 조작이 된다구) 그래서 함수를 사용하는 이유는 1. 긴 코드를 저장 2. 파라미터 사용하려구 함수를 사용하는 이유 1. 긴 코드를 저장 왜냐면 다른데서도 막 쓸려구 // 이렇게 만들어놓으면은 function 바보().. 2022. 7. 30. [JavaScript] eventListener 에서 this 의 의미 (3) + e.currentTarge 의 뜻 💜 요약 메소드의 this 엄마{} window 의 this window{} 전역 function 의 this window{} (=엄마{}) constructor 의 this instance (=새로 만들어지는 아가 object) eventListener 의 this e.currentTarget (=지금 이벤트가 동작하는 html 태그) 💜 this 의 뜻5_eventListener eventListener 의 this: e.currentTarget (=지금 이벤트가 동작하는 html 태그) 이벤트리스너를 달기 위해 버튼을 만들고 id 값을 '잉' 으로 설정해줬다. 잉 만들어진 버튼을 클릭하면 this 와 e.currentTarget 이 출력될 것이당 둘 다 같은 값이 출력되고 그 값은 지금 이벤트가 동.. 2022. 7. 27. [JavaScript] constructor 에서 this 의 의미 (2) + instance 의 뜻 💜 요약 메소드의 this 엄마{} window 의 this window{} 전역 function 의 this window{} (=엄마{}) constructor 의 this instance (=새로 만들어지는 아가 object) eventListener 의 this e.currentTarget (=지금 이벤트가 동작하는 html 태그) 💜 this 의 뜻4_constructor constructor 의 this: instance (= 새로 만들어지는 아가 object) 자바스크립트에서 constructor 를 사용하면 새로운 object 들을 만들어낼 수 있다. function 엄마 (이름) { this.name = 이름 }; 이렇게 엄마 constructor 를 만들었구 키값 name 앞에 this... 2022. 7. 26. [JavaScript] object메소드, window, function(전역) 에서 this 의 의미(1) 💜 요약 메소드의 this 엄마{} window 의 this window{} 전역 function 의 this window{} (=엄마{}) constructor 의 this instance (=새로 만들어지는 아가 object) eventListener 의 this e.currentTarget (=지금 이벤트가 동작하는 html 태그) 💜 this 의 뜻1_object 메소드 메소드의 this: 엄마{} 메소드는 object 안의 함수를 뜻한다. let 엄마obj = { 종족 : '토끼',// 이거는 값 이름메소드 : function(){// 이거는 메소드 console.log('버니'); }, 아가메소드: function(){ // 이거두 메소드 console.log(this); } } console.. 2022. 7. 25. [JavaScript] window 의 의미, window object 에 들어가는 값, 전역변수가 저장되는 원리 window 뜻? 😮 window 는 엄청 큰 object 이다. 실제로 개발자도구에서 window 의 타입을 검색해보면 object 라고 나온다. window object 안에 들어있는 값🙄 window object 안에는 전역으로 쓸 수 있는 기본 함수들이 저장되어있다. alert, length 같은 함수들! 심심하면 개발자도구에서 window 입력하고 살펴봐도 좋당 그래서 🤩전역🤩에다가 함수나 변수를 선언하면 window object 에 저장된다. 무슨 뜻이냐면 a함수(); 로 출력한 결과랑 window.a함수(); 로 출력한 결과가 같음 왜 그러냐면 window object 에 저장되었기 때문이다. window 는 object 이기 때문에 window.어쩌구 이런식의 object 문법처럼 사용이 .. 2022. 7. 24. [JavaScript] DOM 의 뜻, 자바스크립트가 html 을 해석하는 원리 DOM: Document Object Model DOM 의 뜻: 자바스크립트가 HTML (document)을 object 자료로 정리한 것 Document 를 Object 화 시킨 Model 이라는 뜻이다. 여기서 Doucment 는 html 을 뜻한다. 왜 html 을 Object 화 시켰냐면은 - 자바스크립트로 HTML 언어를 조작하기 위해서… - 자바스크립트가 해석할 수 있는 문법으로 변환해놓으려고 자바스크립트와 html 은 다른 언어이기 때문에 서로 인식을 하지 못한다. 그래서 자바스크립트가 생 html 을 조작하지 못한다. 이런 식으로 자바스크립트가 해석할 수 있게 하기 위해 object 화 시키는 것이다... html Object 화 자바스크립트가 html 언어를 조작할 때 이런 문법을 사용한.. 2022. 7. 24. [html] Google fonts icons (material-icons)삽입하기 + Outlined, Rounded, Sharp, Twotone 추가하기 구글 폰트에 icons 가 있습니다. 개인적으로 font awesome, bootstrap 아이콘들보다 더 이쁜거 같아서 사용해보려고 했습니다. https://fonts.google.com/icons?preview.text=back&preview.text_type=custom Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com Google fonts 이쁘지 않나요?? 유형도 다섯개나 있습니다. 1. Google fonts 사용 방법 1-1. html head 부분에 링크 추가하기 https://google.github.io/material-design-icons/#getting.. 2022. 2. 6. 이전 1 2 3 4 5 6 다음 반응형
