생활코딩 front-end/Javascript (15) 썸네일형 리스트형 {SFB} Javascript day 10 - 함수 맛보기 ● 함수 function 함수는 코드가 많아짐에 따라 잘 정리하기 위한 도구로써 아주 간단하며 강력한 역할을 해낼 수 있는 기능이다. 우선 먼저, 우리가 연습했던 코드를 이용해서 함수를 전체적으로 맛보자. 위 코드는 우리가 앞 전 공부한 내용인 반복문을 통해서 만들었던 코드였다. 그 코드를 function 함수 아래 적은 것인데... 만약 우리가 위 스크린샷처럼 함수를 이용하지 않았더라면 어떤 불편함이 있었을까? 만약 위 코드를 가지고 있는 코드가 1억 개라고 해보자. 그런 상황에서 powderblue 를 다른 색으로 바꾸기 위해서는 아마 1억 번을 수정했어야 했을 것이다. 또는 많은 태그의 내용들이 서로 완전히 중복된 코드인 것을 확신할 수 있는가? 당연히 못할 것이다. 또한 코드의 양이 많아지게 되고.. {SFB} Javascript day 9 - 반복문과 배열3 ● 배열과 반복문의 활용 우리의 예제에서 한개의 버튼(토글형태) 만들었다. 야간 모드일 때는 링크들이 밝게 표시되고, 주간 모드일 때는 다소 어두운 계열로 링크가 표시되게 완성해보자. 콘솔을 이용해서 웹페이지에 적용해보면서 공부해보자. 웹페이지에서 모든 링크를 가져오기 위한 코드는 document.querySelector('a') 라고 배웠기에 이렇게 적용시켜보자. 그러면 나오는 값이 1개 나오는데 조금 이상하지 않나? 우리는 분명 모든 a태그를 불러오려고 입력했지만 맨 첫번째 a태그만 나온다. 그 이유는 querySelector() 명령어가 결과적으로 태그 중 맨 처음 등장하는 하나만 가져오기 때문이다. 따라서 전체 a 태그를 불러오기 위한 명령어는 바로 querySelectorAll() method .. {SFB} Javascript day 8 - 반복문과 배열2 ● 배열과 반복문 활용 연습 위 코드는 js 코드를 사용하지 않고 적은 것이다. 만약 태그 대신 목록이 아주 복잡한 태그이고 이것에 대한 수정이 빈번하게 일어난다면 위와 같이 글 목록을 작성하는 것이 보통 일이 아닐 것이다. 이때 서로 연관된 데이터들을 담는 방법인 배열을 사용하면 아주 좋다. 그리고 배열에 담긴 데이터를 순차적으로 꺼내서 라는 태그를 만드는 역할이 반복문이다. 따라서 배열과 반복문을 이용해서 똑같이 바꿔보자. var coworkers = ['egoing', 'leezche', 'duru', 'taeho'] 를 작성하여 배열에 변수를 할당한다. 배열 안의 각 항목들을 원소(element) 라고 한다. 이제 coworkers 라는 변수가 가리키는 이 배열에 담긴 데이터 하나하나 꺼내서 태그.. {SFB} Javascript day 7 - 반복문과 배열 ● 반복문 사용 이유 우리가 만든 예제에서 night 모드를 했을 경우에는 링크들이 너무 어둡고, day 모드일 경우에는 너무 밝다고 생각해보자. 따라서, night 모드일 때는 조금 밝게, day 모드일 때는 조금 어둡게 링크가 표현되면 좋겟다고 가정하면 우리가 배운 것을 이용하여 적용하기 위해서는 모든 링크에 대해 style 속성 값을 조절해서 코드를 작성해도 되지만, 극단적인 상황이라고 하면( 링크가 1억개 이상 ) 이 작업을 1억 번 이상을 해야한다. 이렇게 되면 코드의 양이 늘어나고, 유지보수가 힘들어지게 된다. 이런 상황에서 효율적으로 처리하기 위해 바로 반복문을 사용할 수 있다. 우선 반복문을 적용한 코드를 미리 보자. 그리고 이 결과를 살펴보기 위해 웹페이지의 검사기능을 살펴보자. nigh.. {SFB} Javascript day 6 - refactoring ● 리팩터링 ( refactoring ) 리팩터링 이란, 코드를 작성하고 나서 생기는 비효율적인 부분을 잠시 멈추고 효율적으로 만들내는 것. 코드의 가독성을 높이고, 유지보수를 편리하게 만들고, 중복된 코드를 줄이는 방향으로 코드를 개선하는 작업. 우리가 작성한 코드를 리팩터링 해보자. 만약에 이 버튼을 본문 아래쪽에 하나 더 추가하고 싶다고 해보자. 그렇다면 input 태그 전체를 복사하여 아래쪽에 만들고 실행하면 잘 될까? 물론, 배경과 색깔이 바뀌는 것은 적용된다 하지만, 아래쪽 버튼을 보면 야간모드임에도 여전히 night value 를 가지고 있는 것을 확인할 수 있다. 왜그럴까? 아래 버튼을 누르면 위쪽 버튼의 value 값이 변하는 것을 볼 수 있다. 이것의 문제는 id 값이 같은 태그가 2개.. {SFB} Javascript day 5 - 조건문 ● 조건문 조건문 : 하나의 프로그램이 하나의 흐름으로 가는 것이 아니라 조건에 따라 다른 순서의 기능들이 실행되게 하는 것 내가 했던 실습으로 조건문의 필요성에 대한 예를 들어보면 2개의 버튼을 한개로 만들어서 야간 모드에서 버튼을 클릭하면 주간 모드가 되고, 반대로 주간 모드에서 버튼을 클릭하면 야간 모드가 되는 기능을 구현해보고 싶다고 하자. 이것을 토글(toggle) 이라고 하는데, 이 토글을 구현하기 위해서 조건문이 필요하다. 위 코드가 토글을 만든 것이다. if 조건문에 따라 현재 모드가 주간 모드라면 if의 코드가 실행되고, 주간 모드가 아니라면 else의 코드가 실행된다. 또한 === 라는 비교 연산자와 이 === 를 통해 만들어진 불리언(boolean) 이라는 것이 있다. ○ 비교 연산자.. {SFB} Javascript day 4 ● 제어할 태그 선택하기 위 와 같이 night 라는 이름을 가진 버튼을 만들고 클릭하는 이벤트가 발생했을 경우에 페이지의 background 가 black 으로 변하게 하기위한 js 코드를 어떻게 작성해야 할까? - document.querySelector(selectors); 우선, 페이지의 전체를 담당하고 있는 태그에 style 속성을 동적으로, 상호작용에 의해 넣기 위해 js 문법에 따라 작성해야 한다. 이를 위해 사용하는 js 문법이다. 따라서, 태그를 선택하는 선택자로 적용하기 위해 document.querySelector('body') 라고 적으면 된다. 만약 태그에 id 값이 'target' 이라면 'body' 대신 document.querySelector('#target') 라고 적어야 .. 이전 1 2 다음
