쑥쑥자라기🌱

// 배열 (Array) let courseRanking = { '1st': '자바스크립트 프로그래밍 기초', '2st': 'Git으로 배우는 버전 관리', '3st': '컴퓨터 개론', '4st': '파이썬 프로그래밍 기초', } 코드잇의 인기순위를 1등부터 4등까지 나열한 객체를 만들어 보았습니다. 그런데 사실 이런 경우에는 프로퍼티 네임보다는 값들의 순서가 좀 더 중요한 상황이기 때문에 프로퍼티 네임은 지워버리고 이 값들의 순서만 유지해도 될 것 같은데요. 이럴 때는 객체보다 배열이라는 것을 활용하는 것이 좀 더 효율적입니다. 영어로는 Array라고 부르는데요. let courseRanking = [ '자바스크립트 프로그래밍 기초', 'Git으로 배우는 버전 관리', '컴퓨터 개론', '파이썬 프로..

Date 객체 정보 수정하기 set으로 시작하는 다양한 메서드를 활용하면, 생성된 Date객체의 정보를 수정할 수도 있습니다. (대괄호로 감싸진 요소들은 선택적인 요소입니다.) setFullYear(year, [month], [date]) setMonth(month, [date]) setDate(date) setHours(hour, [min], [sec], [ms]) setMinutes(min, [sec], [ms]) setSeconds(sec, [ms]) setMilliseconds(ms) setTime(milliseconds)(1970년 1월 1일 00:00:00 UTC부터 밀리초 이후를 나타내는 날짜를 설정) let myDate = new Date(2017, 4, 18, 19, 11, 16); my..

내장 객체(Standard built-in objects) 우리가 지금까지 가장 많이 사용했던 console.log 함수의 콘솔 객체처럼 JavaScript가 미리 가지고 있는 객체를 '내장 객체'라고 부릅니다. JavaScript는 거의 모든 것이 객체로 이루어져 있기 때문에 특별한 기능별로 다양한 내장 객체들이 존재합니다. 그 중 대표적인 예로 날짜가 있습니다. JavaScript에서 날짜는 모두 'Date'라는 객체로 다룹니다. // Date let myDate = new Date(); console.log(myDate)l; myDate라는 변수를 선언한 다음에 new라는 키워드와 함께 Date하고 함수처럼 소괄호를 열고 닫아 줍니다. 그리고 이 객체를 콘솔에 출력해보면 이 객체를 생성한 순간의 시..

for in문을 활용하면 객체 내부에 있는 모든 프로퍼티들을 하나씩 다룰 수 있습니다. for in 반복문이 실행될 때 따로 정해진 순서 없이 객체에 추가한 순서를 따라서 반복문이 수행됩니다. let myObject = { '2': '알고리즘의 정석', '3': '컴퓨터 개론', '1': '자바스크립트 프로그래밍 기초', }; for (let key in myObject) { console.log(myObject[key]); } 자바스크립트 프로그래밍 기초 알고리즘의 정석 컴퓨터 개론 그런데 이 코드를 보면 객체를 작성할 때는 알고리즘의 정석, 컴퓨터 개론, 자바스크립트 프로그래밍 기초 순서로 작성했는데, 작성한 순서와 다르게 for in 반복문이 수행되었습니다. 숫자형(양수) 프로퍼티 네임 사실 프로퍼..

.객체를 다루는 for문인 for in 반복문에 대해 알아보겠습니다. for in 반복문은 객체 안에 있는 프로퍼티들을 가지고 반복적인 동작을 수행할 때 사용합니다. 객체의 프로퍼티 네임을 가져오는 반복문이기 때문에 일반적인 for문으로는 대체할 수 없는 조금 특별한 반복문입니다. // for...in for (변수 in 객체) { 동작부분 } 기본 구조부터 살펴보면 일반적인 for문과 비슷하지만 소괄호 내부가 조금 다릅니다. 소괄호 내부에서 특정한 변수를 만들고 in이라는 키워드 다음에 반복할 객체를 넣어 주게 되면 이 객체의 프로퍼티 네임이 변수에 할당되고 객체에 프로퍼티 개수만큼 동작을 하게 됩니다. // for..in let codeit = { name: '코드잇', bornYear: 2017, ..

이벤트가 어떻게 전파되는지 알아보겠습니다. Red const box = document.getElementById("box"); const list = document.getElementById("list"); const color = document.getElementById("color"); document.body.addEventListener("click",()=>{ condole.log("1, body"); }) box.body.addEventListener("click",()=>{ condole.log("2, div"); }) list.body.addEventListener("click",()=>{ condole.log("3, ul"); }) color.body.addEventListener(..

// break와 continue let myChoice = 2; switch(myChoice){ case 1: console.log('토끼를 선택한 당신, ...') break; case 2: console.log('고양이를 선택한 당신, ...') break; case 1: console.log('코알라를 선택한 당신, ...') break; case 1: console.log('강아지를 선택한 당신, ...') break; default: console.log('1에서 4사이의 숫자를 선택해 주세요.') } break은 이미 switch문에서도 한번 사용했던 적이 있는데 소괄호 안에 비교할 값을 두고 case로 조건값을 정해서 비교할 값이 조건값에 일치하는 경우에는 그 case에 해당하는 동작 부분..

마우스를 클릭하거나 키보드를 누르거나 하는 행동들을 이벤트라고 하는데요. 이외에도 인풋 창에 포커스가 되거나 문서에 로드가 완료되면 이벤트가 발생합니다. 이때 특정 함수를 할당해서 실행해 줄 수 있는데 이것을 핸들러라고 합니다. 클릭1 클릭2 클릭3 on 다음에 이벤트 타입을 적어줍니다. onclick 내부에 함수 명을 적어줍니다. function sayHello(){ alert("Hello") } const el = document.getElementById('btn'); el.onclick = sayHello; // 이때 괄호는 없어야 함. // 괄호가 있으면 함수의 반환값이 할당됨. 지금은 undefined const el2 = document.getElementById('btn2'); el2.ad..