함수(function) 예고 함수 하면 떠오르는 것이 수납상자이다. 살면서 집에 살림이 많아지면 수납상자를 장만해서 정리정돈을 한다. 이와 마찬가지로 코드가 많아지면 이것을 잘 정리 정돈하기 위한 도구들이 필요하다. 그 첫 번째로 생각할 아주 간단하면서도 강력한 도구가 함수이고, 이것보다 좀 더 큰 도구는 객체라는 것도 있다. 이번 시간에는 먼저 함수를 살펴보자. Ex) 3.html 예제에서 태그 안에 onclick 속성 안에 JS 가 있는데 이 태그가 1억 개가 있다고 가정하자. 그리고 그 안에 있는 style.color 를 다 바꿔야 한다고 가정하자. 다 바꿀 수 있을까? 또 여러 개의 태그가 있는데 어느 정도 길이가 길어지면 서로 같다는 것을 눈으로 확인하기 어렵다. 이럴 때를 가정하여 함수를 사용..

배열과 반복문의 활용 배운 내용을 가지고 주간 모드에서와 야간 모드에서 링크 목록을 뚜렷하게 만들어보자. 먼저 3.html 웹페이지에서 개발자도구, 검사로 들어가 console 에서 이 웹페이지에 있는 모든 a 태그를 가져와 보자. document.querySelector('a') 라고 입력하면 하나만 가지고 온다. querySelector 라고 하는 저 메소드, 함수, 명령(다 같은말)은 a태그에 해당되는 첫 번째 것만 가지고 오는 특성을 가지고 있기 때문. 추천 검색어 javascript get element by css selector multiple 추천 검색어 javascript querySelectorAll 이것을 alist 라는 변수에 담고 console.log( ); 을 입력 console..

반복문의 예고 예제에서 주간 모드와 야간모드 상태에서 링크들의 색상을 변경하려고 한다. 주간 모드일 경우 좀 더 어둡게, 야간 모드일 경우 밝게 즉 버튼을 눌렀을 때 모든 링크들의 스타일 속성 값을 바꿔주는 코드를 짜 보자. 그런데 만약 이렇게 바꿔야 할 링크가 1억개가 넘는다면? 이때 반복문이 필요하다. 배열(Array) (먼저 배열이 무엇인가를 알고 왜 필요한지는 반복문 수업에 가서 알자.) 집에 살림이 늘어날 수록늘어날수록 이 살림들을 수납할 수 있는 냉장고나 책장, 서랍을 구매하게 된다. 우리는 살림, 물건이 늘어날수록 이것들을 그 필요성에 따라 정리 정돈할 수 있는 여러 가지 수납공간들을 마련하게 된다. 프로그래밍도 마찬가지이다. 데이터가 많아짐에 따라서 그 데이터를 그냥 둘 수 없기 때문에 그..

的. : 주어나 목적어 앞에 있는 성분을 수식 성분으로 변화시켜 관형어로 만든다. [ 관형어 + 的 + 주어/목적어 ] Ex) 你的帽子很好看。 你 的 帽子 很 好看。 관형어 * 주어 부사어 술어 Ex) 朋友买了我的礼物。 朋友 买了 我 的 礼物。 주어 술어 관형어 * 목적어 地. : 술어 앞에 있는 성분을 수식성분으로 변화시켜 술어를 수식하는 부사어를 만든다. [ 부사어 + 地 + 술어(동사/형용사) ] Ex) 慢慢地好起来了。 慢慢 地 好 起来了。 부사어 * 술어(형용사) 보어 Ex) 他深深地爱着我。 他 深深 地 爱着 我。 주어 부사어 * 술어(동사) 목적어 得. : 술어(동사/형용사) 뒤에 놓여 정도를 표시하거나 나타내는 보어로 만든다. 정도 보어 [ 술어(동사/형용사) + 得 + 정도 보어 ] Ex) ..

리팩토링 중복의 제거 리팩토링(Refactoring) 코딩을 하고 나면 좀 비효율적인 면들이 생기기 마련이다. 그러면 동작하는 것은 그대로 두고 코드 자체를 아주 효율적으로 만들어서 그 코드의 가독성을 높이고 유지보수를 하기 편리하게 만들고, 중복된 코드를 제거하는, 다시 개선하는 작업 리팩토링의 사례 - 3.html 예제에서 비효율적인 것들을 제거해보자. 먼저 야간모드 기능을 스크롤을 내려 웹페이지의 아래쪽에서도 사용하게 만들고 싶다는 가정. 코드 작성한 것을 동일하게 아래에 붙여 넣기 한다면 제대로 작동하지 않는다. (开启 버튼을 누르면 야간모드는 작동하나 웹페이지 상단 원래의 버튼만 关闭 로 바뀌고 아래 것은 바뀌지 않는다.) 붙여넣기한 코드의 id값을 구분해줘야 한다. WEB网络 计算机语言-常见语..

조건문 예고 하나의 프로그램이 하나의 흐름으로만 가는 것이 아니라 조건에 따라서 다른 순서의 기능들이 실행되도록 하는 것이라 할 수 있다. 저번 시간에 만들었던 주간모드, 야간모드를 하나의 버튼으로 만들고 더 이쁘게 버튼을 디자인하려고 한다. 이때 주간모드와 야간모드를 합쳐 하나의 버튼을 만드는 방법이 토글(toggle)버튼이다. 이후의 과정을 통해 비교 연산자와 그 결과로 만들어지는 불리언(boolean)이라는 것도 살펴보자. 비교 연산자(Comparison operators)와 블리언(boolean) ex4.html Comparison operators & Boolean === 1===1 1===2 1<2 1<1 ​ === 은 비교 연산자이다. 그리고 이항 연산자이다. 좌항과 우항이 있고 좌항과 우항..