본문 바로가기

JS

(3)
[Vanilla/JavaScript]캘린더 만들기 Calender 만들기 JS연습 겸 간단한 캘린더를 만들어볼까 합니다. 파일들은제 github홈페이지에 저장해 놓을테니 참고해주세요. 이 코드가 꼭 정답이 아닙니다. 더 좋은 코드가 있을 수 있습니다. 기능 구상 달력을 출력합니다. 년도제한은 없습니다. 달력은 6줄로 나오게 합니다.(총 7*6일이 나올 수 있게 합니다.) 토, 일은 다른 색상을 주어서 표시합니다. 현재날짜에는 테두리를 주어서 현재 날짜를 알 수 있게 합니다. 기본적으로 오늘 날짜가 있는 달력이 나오게 하고 이전, 이후 달력을 볼 수 있는 기능을 만듭니다. 이에따라 그 달력의 년도와 월을 표시해줍니다. 이 정도 기능을 염두해 두고 캘린더를 본격적으로 만들어보겠습니다. html과 css를 바탕으로 만든 캘린더 디자인은 다음과 같습니다. 캘린..
[Json/JavaScript]JSON 파싱 및 출력하는 법 JSON을 처음 접하게 되면 이 JSON으로 뭐 정보를 저장해놓고 사용한다는 것은 알겠는데 정확히 JSON 정보를 어떻게 불러오고 쓰는지 알지 못하기 마련이다. 그래서 이번에는 JSON에 정보를 담고 index.html파일을 만들어 JSON에 있는 정보를 index.html상에 표현해보려 한다. 이를 JSON 파싱 이라고 한다. 파싱(parsing)?? 컴퓨터 과학에서는 파싱을 일련의 문자열을 의미있는 토큰(token)으로 분해하고 이들로 이루어진 파스 트리(parse tree)를 만드는 과정을 말한다. 즉, 컴퓨터의 JSON, XML, HTML 등으로 구성된 데이터를 분석하여 내가 원하는 부분만 추출하고자 하는 것을 말한다. 이번 포스트에서는 JSON의 데이터를 파싱하여 JSON 파일 안의 'data'..
[JavaScript]투두 리스트 만들기 ToDoList 만들기 JS를 배우고 좀더 이해하고 친숙해지고자 투두 리스트를 만들어 보려고 합니다. 작업은 VSC(Visual Studio Code)로 했습니다. 파일들은 제 github홈페이지 에 저장해 놓을테니 참고해주세요. 이 코드가 꼭 정답이 아닙니다. 더 좋은 코드가 있을 수 있습니다. 앱 디자인 구상 일단 투두 리스트 디자인을 구상해보았습니다. 심플한 디자인을 선호하는 편이라서 깔끔해보이게 디자인을 만들었습니다. active는 "끝나지 않은 일" 이고 done은 "한 일" 입니다. 입력란에 해야 할 일을 입력하면 active라고 적혀있는 곳 밑에 리스트(active리스트라고 부르겠습니다.)를 출력해줍니다. active항목의 done 버튼을 누르게 되면 active리스트에서 그 항목이 없어집니..