웨일의 블로그 웨일의 블로그

1. 캘린더 코드 실행시 오늘의 요일, 날짜가 출력되어야 하고 색상은 빨간색이다. 화살표로 이동시 해당 월의 달력이 출력되어야 하고 표시되는 날은 1일이다. 일을 클릭했을 때 그 일의 요일과 숫자를 출력해야 한다. 1. html 구성 테이블구조를 사용했고 한달에 최대 6주가 있을 수 있기 때문에 tr을 6개 생성하였다. ‹ SUN MON TUE WED THU FRI SAT › 2. CSS 구성 깔끔한 UI를 위해 버튼의 경계와 클릭시 아웃라인을 삭제했고 display:flex로 가로 정렬 및 아이템 중앙 정렬을 했다. th { font-weight:bolder; font-size: 20px; } td { text-align: center; } button { border: none; background:..

투두리스트 다시 만들기 강의를 보면서 전체적으로 한 번 따라서 만들어 본 후에 이번에는 강의의 도움없이 만들어 보았다. 다 알 것 같은 기분이 들어도 막상 혼자서 만들어 보니 시작부터 헤매게 되었다. 그래도 코드나 함수간의 전체적인 흐름이 기억에 남아 있어서 몇 번 코드를 보긴 했지만 코드 작성을 마무리 할 수 있었다. 배열에 여러 객체를 저장한 후 각 인덱스의 객체의 프로퍼티를 사용하는 부분이 아직 익숙치 않는데, 아직 어렵지만 효율적인 데이터 저장 방법인 것 같다. click, submit같은 이벤트나 position 데이터를 어떻게 사용하는지에 대해서도 더 알게된 것 같다. Mini Web Project 1. Background Changer Click me 버튼 클릭시 배경색과 출력된 Hex값이 ..

3.8 Weather api 1 외부 날씨 api를 불러와서 필요한 데이터만을 뽑아서 사용하는 방식을 배우는 단계이다. 일단, 원하는 지역의 온도,지명을 알기 위해서는 위도와 경도가 필요하다. 따라서 위도와 경도를 먼저 알아내야 하는데 이 과정에서는 외부 api가 필요없이 javascript 내에서 가능하다. const COORDS = "coords"; function saveCoords(coordsObj) { localStorage.setItem(COORDS,JSON.stringify(coordsObj)); } function handleGeoSuccess(position) { console.log(position); const latitude = position.coords.latitude; cons..

3.4 Making a todo list 1 할일을 입력한 후 엔터를 치면 타이핑 했던 것들이 지워지고 할일이 출력되고 옆에 지우는 버튼이 생성되어야 한다. 다시 할일을 입력하면 새로운 할일이 이전 할일 밑에 생성되어야 한다. 지우고 싶은 할일의 지우기 버튼을 누르면 해당 할일이 지워져야 한다. 3.5 Making a todo list 2 local storage에는 자바스크립트 데이터 저장이 불가능하고 스트링만 저장 가능하다. 저장되는 값은 모두 스트링으로 변환된다. 따라서 local storage에 저장할 때는 스트링 형태로 변환 후 저장하고 불러올 때는 객체 형태로 변환 후 사용한다. 어떤 삭제 버튼이 눌렸는지는 event.path[1].id으로 알 수 있는데 target으로 더 쉽게 알 수 있다...

3.0 JS clock part 1 document: html 전체를 가리킴, document.querySelector로 하나의 변수에 집어넣었으면 그 변수(태그) 안의 자식태그는 변수.querySelector로 접근할 수 있다. 날짜에 대한 정보를 받으려면 const date = new Date(); 로 구조체 만들어서 date변수에 넣고 사용한다. 시간을 출력할 때 10미만 숫자에 0을 붙이기 위해 삼항 조건 연산자 사용 3.1 JS clock part 2 시간이 1초마다 갱신되야 해서 setInterval(fn,밀리초)이라는 함수를 사용한다. 1초마다 시간이 갱신되게 하려면 1초마다 시간을 출력하는 함수를 실행해야 한다. setInterval(fn,ms)함수를 사용하고 따라서 setInterval(..

하기 전 내 생각들 날씨,위치,시간,투두리스트,이름 갱신되게 해야함 위치: api써서 받아오기 갱신되게 해야함 투두리스트: 텍스트 적는 칸 만들고 그거 보여주기 계속 적을수 있어야 함 버튼 누르면 새로운 투두리스트 적는 칸 떠야함 버튼 만들기 버튼에 투두리스트 생성 코드 넣기 생성 위치 잡기 삭제 누르면 투두리스트 삭제되야함 삭제버튼 button타입 삭제방법 알아야함 이름: 텍스트 적는 칸 만들고 그거 보여주기 시간: 현재시간 보여주는 메소드쓰기 날씨: api써서 받아오기 크롬 새페이지 만들면 보이는 화면 만들기 실습 전 이론 파트 공부 2.3 function basic 어떤 변수가 함수를 받았을 때 이 변수가 받는 값은 그 함수의 리턴값이다. 리턴값이 정의되지 않았다면 undefined를 받는다. 2...

문자열을 다룰 때 유용한 프로퍼티와 메소드를 제공하는 레퍼(wrapper)객체이다. 원시타입인 문자열이 wrapper객체 메소드 사용할수 있는 이유는 문자열이 프로퍼티,메소드 호출시 wrapper객체로 일시적으로 변환되서다. 1. String Constructor 생성방법: let strOjb = new String('Lee'); 이때 어떤 타입의 인자가 와도 문자열로 변환된다. 2. String property 2.1 String.length String의 길이를 구할 때 사용한다. 3. String Method 3.1 charAt(number) 인덱스에 해당하는 위치의 문자를 반환한다. const str = 'Hello; str.charAt(0):'H' 3.2 concat(string) 인수로 전달한..

10강 - 객체 1. 객체: 키와 값으로 구성된 프로퍼티들의 집합 객체 내 프로퍼티: 함수를 포함하여 모든 값을 사용 가능. 이때 함수는 메소드라 불림 데이터(프로퍼티)와 동작(메소드)를 모두 포함할 수 있어서 구조화에 유용하다. 프로토타입: 객체지향의 상속을 구현하기 위한것 1.1 프로퍼티 프로퍼티 키(이름)과 프로퍼티 값으로 구성됨 프로퍼티는 프로퍼티 키로 유일하게 식별 가능(식별자,identifier) 프로퍼티 키: 빈 문자열을 포함하는 모든 문자열 또는 symbol값, 의외의 값은 타입 변환되어 문자열이 된다. 이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티만 적용된다. 프로퍼티 값: 모든 값 객체는 순서를 보장하지 않는다. 2. 객체 생성 방법 프로토타입 기반 객체 지향 언어로..