키다리 개발자

브라우저 콘솔을 켜고, this를 치면 window가 나옵니다. 함수 내에 넣어서 사용해도 this는 window 입니다. this는 기본적으로 window라는 사실을 알 수 있습니다. 객체 메서드 a 안의 this는 객체를 가리키고 있습니다. 이것은 객체의 메서드를 호출할때 this를 내부적으로 바꿔주기 때문입니다. 호출하는 함수가 객체의 메서드인지 그냥 함수인지가 중요한데, a2는 object.a를 꺼내온 것이기 때문에 더이상 object의 메서드가 아닙니다. 그래서 window가 출력됩니다. 또한 this를 내부적으로 바꿔주기 위해 생성자 함수(=함수)를 만들어 this를 바꾸어 주어 사용할 수 있습니다. 생성자 함수를 만들때 new로 호출을 해야하는데 그렇지 않으면 기본값인 window를 가르키기..

filter(value, index) filter 함수는 반환 값이 true인 대상만 필터링해서 새로운 배열로 반환한다. value = 배열 안의 요소 하나하나의 값 -> 여기서(사진)는 1, 2, 3, 4, 5 index = 순서 -> 이 데이터가 몇 번째 데이터인가? value 값에서 2에서 4까지 숫자만 남기고 새로운 배열을 반환하고 싶을때 새로운 배열 [ 2, 3, 4 ] 예시) 배열에서 Premium 요소가 true인 요소들만 필터링해서 가져오기 Premium 회원들만 필터링해서 출력할 수 있다. map(value, index) 모든 요소에 적용될 공통 form에 반환 값을 적용하여 새로운 배열을 반환한다. arr 배열 내 모든 숫자에 value + 5를 반환하여 새로운 배열인 [ 6, 7, 8..

타이머 함수는 원하는 시간을 스케쥴링하여 함수를 호출하는 기능을 갖고 있습니다. 함수 내에는 호출될 함수 내 코드와 시간을 입력합니다. (1000ms = 1 second) ex) 3초 후에 호출하고 싶으면 3000을 입력하면 됩니다. setTimeout(function() { // Code here } , delay); 일정 시간 후에 함수를 단 한번 호출한다. setInterval(function() { // Code here } , delay); 일정 시간마다 반복하여 함수를 호출합니다. 단, 함수 내 사용 시 함수 내 반복 기준으로도 반복되므로 주의해야 한다. clearTimeout(); setTimeout함수를 중단 및 삭제한다. clearInterval(); setInterval 함수를 중단 및..

Web Frontend 개발자가 되기 위해 한 달 내내 코딩 공부에 매진하였다. 작은 프로젝트를 하면서 발전된 모습에 성취감을 얻었으며, HTML, CSS, Javascript를 하며 개발자가 되기 위해 한층 더 가까워진 것 같아 뿌듯하다. 10월에 달성한 목표 HTML, CSS, Javascript(기본) 공부한 내용 모두 블로그 작성 흥미와 적성 발견하기 퇴사 후 몇 달간 막연하게 Java를 공부 하였는데, Frontend 개발자 로드맵에 대해 우연히 알게 되어 분야에 좀 더 찾아보던 중 Javascript의 장점과 매력에 관심을 갖게 되어 주 언어를 Javascript로 바꾸어 공부를 하게 되었다. 아직 기본적인 것들이지만 HTML, CSS, Javascript 3개를 활용하여 작은 프로젝트를 만들..

Template string : ES6에 새롭게 추가된 기능이며 backtick : ` ` 을 사용하여, javascript 간단한 문자열 채워넣기 (string interpolation) 기능이 가능해졌습니다. 템플릿 문자열은 JavaScript 값(value)을 문자열에 넣어 보기 좋고 편리한 방법입니다. 그리고 ${대입받는 값} 템플릿 대입문(template substitution)이라고 부릅니다. 객체 배열, data model const recommenderCardDataModels = [ { recImg: 'https://img.sbs.co.kr/newsnet/etv/upload/2018/01/23/30000591747_1280.jpg', recName: 'Kim Yu Jung', recLoc..

Javascript의 for, if문을 이용한 별 찍기와 왕관 찍기를 코드 리뷰를 해보겠습니다. 별찍기 1 ~ 4 for(let i = 1; i

Javacript + HTML + CSS로 계산기를 만들어 보았습니다. 계산기 제작 순서는 HTML로 틀을 만듦 Javascript로 계산 기능 구현 CSS로 디자인 적용 로 순차적으로 하였습니다. HTML 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 계산기 % C del / 9 8 7 * 6 5 4 + 3 2 1 - 0 . = button 태그에 onclick 이벤트 속성을 주어 javacript의 함수와 연결시켰습니다. onclick은 이벤트 속성으로 한번 클릭을 ..

if, else if, else 조건문은 위에서부터 순차적으로 제어를 하는 정말 중요한 실행문입니다. 1 2 3 4 5 6 7 8 if (score >= 90) alert('A'); else if (score >= 80) alert('B'); else if (score >= 70) alert('C'); else alert('F'); if(표현식) : if 문은 표현식의 결과가 참(true)이면 주어진 실행문을 실행하며, 거짓(false)이면 아무것도 실행하지 않습니다. else if(표현식) : else if는 중첩하여 여러번 조건문을 사용할 수 있습니다. else : else는 위의 모든 if, else if 문이 거짓(false)일 때, 참으로 실행됩니다. 그러므로 괄호안에 표현식은 없습니다. 하나의..