안녕하세요. 진득 코딩입니다.  프로그래밍 언어도 계속해서 발전하기 위해 업데이트를 하게 됩니다.  자바스크립트도 계속해서 업데이트가 되어가면서 새로운 기술들이 나오게 됩니다.  이번 시간에는 자바스크립트 최신 기술들에 대해 알아보도록 하겠습니다. ES6   먼저 ES6 업데이트에서 나온 여러 최신 자바스크립트 문법에 대해 알아보도록 하겠습니다.  첫 번째는 객체 초기화 방법입니다.  원래는 각각의 요소들을 console에 출력하기 위해서는 key:value 꼴로 작성하여 출력하였습니다.  이때 변수 이름이 키값과 동일하다면 해당 키값만 적어주면 해당 키값이 변수 이름이 되어 출력됩니다.   console에 출력된 값을 보시면 키값이 변수 이름이 되어 해당 키값에 있는 데이터 값을 잘 가지고 온 것을 확..

안녕하세요. 진득 코딩입니다.  저번 시간에는 버튼 로직을 만들고 간단한 버튼 스타일을 입혀주었습니다.  이번 시간에는 아이템 필터링하는 기능을 만들고 여러 스타일들을 적용하여 프로젝트를 마무리하는 과정을 살펴보도록 하겠습니다. HTML   먼저 HTML을 살펴보도록 하겠습니다.  이번에도 HTML은 거의 변화가 없습니다.  일단 태그를 살펴보게 되면 placeholder 속성을 추가하여 사용자로 하여금 해당 input 박스에 무엇을 입력해야 하는지 알려주는 기능을 추가하였습니다.  이번 프로그래밍에서는 아이템 필터링을 하여 탭 별로 상태를 알아야 하기 때문에 각 탭에 id를 부여하였습니다.  마지막으로 태그에 아무 것도 입력하지 않았을 때의 예외처리를 위한 Alert 창을 위해 태그를 추가하였고 ..

안녕하세요. 진득 코딩입니다.  이번 시간에는 저번 포스팅부터 시작한 To-Do-List의 버튼 로직을 만드는 과정에 대해 살펴보도록 하겠습니다. HTML   task-Board 안에 들어가는 버튼들의 변화가 많은데 이 task들은 js 파일에 있기 때문에 HTML 파일에는 변화가 거의 없습니다.  우선 head 부분을 살펴보면 하이퍼링크에 파일 이름이 바뀐 것을 확인할 수 있습니다.  이번 과정 중에 favicon을 추가하였고 해당 정적 파일은 favicon 폴더에 넣어두었습니다.  또한 태그 밑에 있는 + 아이콘 부분을 태그에서 태그로 변경하여 버튼 이미지를 업데이트하였습니다. CSS   다음은 css에 추가된 css 클래스에 대해 살펴보도록 하겠습니다.  전체적으로 check와 delete 버..

안녕하세요. 진득 코딩입니다.  프로그래밍을 좀 배웠다 하시는 분들이 시도하기에 접근성이 좋은 프로젝트 중 하나는 바로 To-Do-List 만들기입니다.  이번 시간에는 서브 프로젝트로 To-Do-List를 만드는 과정 중 메인 로직을 구현하는 과정을 살펴보도록 하겠습니다. 프로젝트 구조   우선 프로젝트 구조부터 살펴보도록 하겠습니다.  assets에는 리소스 파일들을 모아두는 폴더로 일단 favicon과 image 폴더로 구분해 두었습니다.  image 폴더에는 배경사진을 넣어둔 상태입니다.  웹 정적 리소스로는 html, css, js 파일을 넣어두었습니다. html   우선 html head 부분을 살펴보도록 하겠습니다.  http-equiv="X-UA-Compatible" content="IE=..

안녕하세요. 진득 코딩입니다.  그동안 자바스크립트의 기본적인 문법에 대해 알아보았습니다.  이번 시간에는 본격적으로 이러한 문법들을 이용하여 간단한 게임을 만들어보도록 하겠습니다. 게임 구상하기   시작부터 무작정 코딩을 시작하는 것보다는 만들 게임을 구상해 보고 프로그래밍을 하도록 하겠습니다.  규모가 큰 대형 프로젝트라면 설계부터 하나하나 하는 것이 좋지만 간단한 게임이기 때문에 약식으로 이렇게 적고 넘어가도록 하겠습니다.  전체적으로 랜덤 번호를 받아서 해당 랜덤 번호를 맞추는 게임입니다.  유저가 숫자를 추측한 값이 더 크다면 UP!!이라고 알려주고 작다면 DOWN!!, 맞췄다면 맞췄다고 알려주는 기능을 만들도록 하겠습니다.  그리고 리셋을 하게 되면 게임이 처음부터 다시 시작되며 기회는 일단 ..

안녕하세요. 진득 코딩입니다.  지난 포스팅까지 프로그래밍을 할 때 알아야 할 메인 속성들을 살펴보았습니다.  이번 시간에는 이러한 메인 속성들 중 마지막 메인 속성인 함수에 대해 알아보도록 하겠습니다.  함수  함수는 일의 단위입니다.  로직을 짤 때 테스크들이 따로따로 돌아다니게 되면 관리하기가 힘들어집니다.  이때 이런 테스크들을 하나로 모아서 관리하기 위해 나온 것이 함수입니다.   위와 같이 하나의 일을 하기 위해 여러 코드들을 사용하는 예시가 있습니다.  하지만 매번 햄버거를 만들 때마다 위 코드를 하나하나 다 적어주는 건 효율적이지 않고 오류의 가능성이 높아집니다.    위에 있는 여러 코드들을 함수로 묶어서 한번에 표현할 수 있습니다.  위와 같이 표현하게 되면 각 함수만 호출하면 안에 있..