🧑‍💻개발/코딩애플 4

쉽게 이해하는 javaScript 객체지향&ES6 신문법③

spread operator(...) 설명 -1- var 어레이 = ['hello', 'world']; console.log(...어레이); // hello world -2- var 문자 = 'hello'; console.log(...문자); // console.log('h','e','l','l','o') h e l l o 1. Array에 붙이면 대괄호를 제거해줌 2. 문자에 붙이면 문자를 펼쳐줌 활용방법 -1- var a = [1,2,3]; var b = [4,5]; var c = [...a, ...b] console.log(c) // [1,2,3,4,5] // Deep copy var d = [1,2,3]; var e = [...d]; // var e = d => X(값이 공유됨) d[3] = 4;..

쉽게 이해하는 javaScript 객체지향&ES6 신문법②

변수에 대한 정의 var 이름 = "Kim"; let 번호 = "000"; const 주소 = "서울"; const 영화 = {제목 : "명량", 개봉 : "0000.00"}; - 호이스팅 현상 : 변수나 함수의 선언을 스크립트 맨 위로 끌고 오는 현상 재선언 재할당 범위 var O O fucntion let X O { } const X X { } - var 변수는 호이스팅 시 undefined이 자동으로 할당 - const 변수는 오브젝트 내부의 값은 변경 가능(Ex.const 오브젝트 = { 이름 : '만두'; } => '만두'는 변경 가능 - 수정불가능한 오브젝트를 만드는 메소드 : Object.freeze(select); 변수 퀴즈 모달창0 모달창1 모달창2 버튼0 버튼1 버튼2 Template ..

쉽게 이해하는 javaScript 객체지향&ES6 신문법①

this와 애로우 함수의 사용 // this의 쓰임 1 console.log(this); //window가 나옴 function 함수(){ console.log(this); //window가 나옴 } 함수(); //window.함수(); // this의 쓰임 2 // 오브젝트 함수 내에서 쓰면 그 함수를 갖고 있는 오브젝트를 말함 var 오브젝트 = { data : 'Kim', 함수 : function(){ console.log(this) } } 오브젝트.함수(); // 애로우 fucntion을 쓰면 함수 밖의 this를 그대로 가져옴 var 오브젝트2 = { data : 'Kim', 함수 : () => { console.log(this) } } 오브젝트2.함수(); // case study 3 var ..

자바스크립트 입문과 웹UI 정리

폼 만들기 로그인하세요 전송 닫기 버튼 - 제이쿼리의 $(select).on('click', function(){})은 자바스크립트 select.addEventListener('click', fucntion(){})과 같은 의미 - 제이쿼리의 $(select).on('click', function(e){}) 함수 안에 `e`를 넣으면 `e.target`은 유저가 실제로 누른 것을 불러옴 - $(select).is(select)는 괄호 안의 값에 따라 `true`와 `false`로 반환함 - `.preventDefault()`는 `a`나 `submit`같이 페이지 이동이나 새로고침의 동작을 막아줌 (비슷한 예시로 `.stopPropagation`도 사용할 수 있는데 이 메서드는 이벤트버블링을 막아줌) 다크..