쑥쑥자라기🌱

JavaScript는 원래 웹 브라우저를 다루기 위해서 등장한 프로그래밍 언어입니다. 우리가 사용하는 이 웹 브라우저를 JavaScript의 윈도우라는 객체로 다룰 수가 있는데요. 일단 콘솔에 윈도우 객체를 한번 출력해보겠습니다. 저장하고 실행해보면 윈도우라는 객체가 하나 나오는데 삼각형을 눌러서 펼쳐보면 스크롤을 계속해도 끝나지 않을 정도로 많은 프로퍼티들이 있습니다. 윈도우 객체는 말 그대로 이 브라우저의 창을 대변하는데요. 그래서 이 객체 안에 있는 프로퍼티들을 활용하면 JavaScript로 브라우저가 가지고 있는 다양한 정보들을 얻거나 혹은 브라우저를 자유롭게 제어를 할 수가 있습니다. 예를 들어서 innerwidth나 innerHeight라는 프로퍼티에 접근하게 되면 탭 내부의 너비와 높이 값을..

Factory Function이나 Constructor Function을 사용해서 객체를 생성하는 방법 사실 이 두 가지 방법이 자바스크립트에서 객체를 생성하는 주된 방법이었는데요. 그런데 2015년에 만들어진 자바스크립트 표준, ES6에서는 Class라는 키워드가 추가되었습니다. Class 키워드는 자바스크립트에서 조금 더 직관적이고 간편한 방법으로 객체 지향 프로그래밍을 할 수 있도록 해 줍니다. 이 Class 키워드를 어떻게 사용하는지 보여드리겠습니다. function User(email, birthdate){ this.email = email; this.birthdate = birthdate; this.buy = function (item) { console.log(`${this.email} bu..

Constuctor Function 이란 생성자 함수라는 뜻입니다. 먼저 Constructor Function 예시를 보여드리면 function User(email, birthdate) { this.email = email; this.birthdate = birthdate; this.buy = function (item) { console.log(`${this.email} buys ${item.name}`); } } const item = { name: '스웨터', price: 30000, } const user1 = new User('chris123@google.com', ' //1992-03-21'); const user2 = new User('jerry@google.com', ' //1995-07-..

지금 코드에서 user 객체를 하나 더 만들어 보겠습니다. const user1 = { email: 'chris123@google.com', birthdate: '1992-03-21', buy(item) { console.log(`${this.email} buys ${item.name}`); }, } const user2 = { email: 'jerry@google.com', birthdate: '1997-07-19', buy(item) { console.log(`${this.email} buys ${item.name}`); }, } 그냥 user 하나를 추가했을 뿐인데 코드의 양이 확 늘어났죠? 지금도 이런데 만약 수십 수백 개의 객체를 생성해야 한다면 작성해야 할 코드의 양이 정말 많아지겠죠? 이 문..

객체 지향 프로그래밍이란 객체 간의 상호작용을 중심으로 하는 프로그래밍을 의미합니다. 그럼 객체란 무엇일까요? 자 여러분이 쇼핑몰 사이트 하나를 개발한다고 생각 해보세요. 이때 우리는 유저, 상품, 장바구니, 주문내역 등과 같은 수많은 개념적인 대상들을 생각해야 합니다. 그리고 이런 개념적 대상들을 각각 하나의 객체로 만들 수 있는데요. 그렇다면 객체 안에는 무엇이 들어 있을까요? 객체 안에는 그 객체의 상태를 나타내는 변수들과 객체의 행동을 나타내는 함수들이 들어 있습니다. 예를 들어 방금 말한 유저 같은 개념을 하나의 객체로 만든다고 하면 그 안에는 유저의 아이디, 유저의 생일같이 상태를 나타내는 변수들을 둘 수도 있고 유저가 상품을 구매하는 행동 들을 나타내는 함수들로 둘 수 있는 거죠. 지금 말한..

웹 페이지에서 일어날 수 있는 대부분의 일들을 이벤트라고 부릅니다. 그래서 웹 페이지에는 정말 다양한 이벤트들이 있는데요. 우리가 그냥 마우스를 움직여도 이벤트고 키보드를 누르거나 페이지를 스크롤 하는 일도 모두 이벤트입니다. 그런데 이 중에서도 우리가 가장 자주 접할 수 있는 이벤트를 뽑으라면 아마 마우스 클릭이라고 할 수 있을 것 같은데요. click이라는 버튼이 하나 있고 지금은 클릭을 해도 아무런 변화가 일어나지 않습니다. querySelector를 이용해서 이 버튼을 선택해 보겠습니다. // 이벤트(Event)와 버튼 클릭 const btn = document.querySelector('#myBtn'); 이렇게 변수를 하나 만들어서 querySelector 메소드를 이용해서 querySelect..

document 객체에서 css 선택자로 태그를 선택하는 메소드는 querySelector라는 메소드입니다. 이 querySelector 메소드의 파라미터로 css 선택자를 문자열로 전달해 주면 되는데요. const myTag = document.querySelector('#myNumber') console.log(myTag) const myTag2 = document.getElementById('myNumber') console.log(myTag2) const myTag3 = document.querySelector('.color-btn') const myTag4 = document.querySelectorAll('.color-btn') const myTag5 = document.getElementBy..

document.getElementsByTagName('태그이름')메소드를 활용하면 태그 이름으로 태그를 선택할 수 있습니다. const btns = document.getElementsByTagName('button'); 이렇게 하면 HTML 문서 내에 있는 모든 button 태그를 선택하게 됩니다. document.getElementsByClassName('class')메소드와 마찬가지로 태그 이름으로 요소를 찾는 경우에 여러 개의 요소가 선택될 수 있기 때문에 메소드 이름에 Element(s), s가 있고, 실행결과 역시 HTMLCollection을 리턴한다는 점도 함께 기억해 두시면 좋을 것 같습니다. 참고로 css 선택자처럼 '*' 값을 전달하게 되면 모든 태그를 선택할 수도 있는데요. cons..