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

반복문의 예고 예제에서 주간 모드와 야간모드 상태에서 링크들의 색상을 변경하려고 한다. 주간 모드일 경우 좀 더 어둡게, 야간 모드일 경우 밝게 즉 버튼을 눌렀을 때 모든 링크들의 스타일 속성 값을 바꿔주는 코드를 짜 보자. 그런데 만약 이렇게 바꿔야 할 링크가 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) 을 살펴본다. 먼저 비교적 익숙한 데이터 타입을 알아보고 이것을 통해 데이터 타입이라는 것이 무엇인가를 파악하고 각각의 데이터 타입들의 성격도 ..