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

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

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

웹브라우저 제어 JS 를 통해서 할 수 있는 일 중의 하나인 웹브라우저 제어에 대해 알아보자. 첫 번째, CSS 의 가장 본질적이고 중요한 문법들을 살펴보자. 두 번째, JS 를 이용해서 제어하고자 하는 태그를 선택하는 방법에 대해 살펴보자. ( 9 to 11 은 CSS 에 대한 수업으로 skip.) 제어할 태그 선택하기 3.html 으로 가서 야간모드와 주간 모드 버튼 만들기. 버튼을 클릭했을 때 태그의 style 속성을 동적으로, 프로그래밍적으로, 또 상호작용에 의해 넣으려고 한다. JS 문법에 따라서 웹브라우저에게 태그를 선택하도록 하는 명령 추천검색어 javascript select tag by css selector Ex) element = document.querySelector(selecto..

데이터타입 - 문자열과 숫자 한국어로는 자료형. 어떤 타입들이 존재하는지 검색을 통해 알아보자. 추천검색어 JavaScript data type mozilla 재단에서 JavaScript types 는 총 7개와 객체로 되어있다고 한다. Primitive values Boolean type Null type Undefined type Number type BigInt type String type Symbol type Objects (collections of properties) 이번 수업에서는 문자열 (String type) 과 숫자 (Number type) 을 살펴본다. 먼저 비교적 익숙한 데이터 타입을 알아보고 이것을 통해 데이터 타입이라는 것이 무엇인가를 파악하고 각각의 데이터 타입들의 성격도 ..

HTML 과 JS 의 만남 : 콘솔 JS를 실행하는 또 다른 방법을 살펴보자. 아주 재밌고 실용적인 방법, 콘솔(Console) 지금까지 JS를 실행하기 위해서 웹페이지를 만들었다. 파일을 만들었다. 그런데 경우에 따라 꼭 파일이 아니라 그냥 어떤 코드를 실행해야 되는 아주 가벼운 상황들이 있다. 이런 경우에는 이런 것을 쓸 수 있다. 개발자도구, 검사에 들어가서 Console 을 클릭하면 커서가 껌뻑거리는 것을 볼 수 있다. 여기서 Console 이라는 것을 이용하면 파일을 만들지 않고도 JS 코드를 즉석에서 실행할 수 있다. 살다보면 계산이 필요할 때 계산기를 사용하듯 살다 보면 데이터를 처리해야 되는 경우들이 많이 있다. 이런 경우 생활코딩님은 습관적으로 Console 창을 열고 여기에 JS 를 실..