WEB2 - JavaScript 30 (객체, object)
·
youtube.com|user|egoing2/WEB2 - JavaScript
객체 쓰기와 읽기 잠깐 복습을 해보면 배열은 정보를 담는 그릇이면서 동시에 정보가 순서대로 저장된다는 특징이 있다. 그렇다면 순서 없이 정보를 저장할 수 있는 것이 있지 않을까? 그게 바로 객체이다. 그렇다고 데이터를 무작위로 넣는 것이 아니다. 객체는 이름이 있는 정리정돈 상자라고 생각하면 되겠다. Tip. 배열은 [대괄호], 객체는 {중괄호} object Create coworkers 라는 객체에 livebyfaith117 라는 정보를 beginner 라는 딱지를 붙여서 저장한 것이고, egoing 이라는 정보를 programmer 라는 딱지를 붙여서 저장한 것이다. 반대로 꺼내올때는 어떻게 할까? object Create document.write("beginner:"+coworkers.beginn..
WEB2 - JavaScript 29 (객체 'object' 의 예고)
·
youtube.com|user|egoing2/WEB2 - JavaScript
객체(object) 예고 객체는 함수와 대립되는 개념이 아니라 함수라는 것 기반 위에서 객체라고 하는 것이 존재하는 것이기 때문에 이제까지 배운 것의 다른 트랙이 아니라 그 트랙이 더 심화되는 것이라고 생각하면 되겠다. 객체는 여러 가지 다면적인 얼굴을 가지고 있는데 이 시간에는 그중에서 딱 하나만 배워볼 예정이다. 이 시간 제시할 객체의 얼굴 중 하나는 정리정돈의 수단이다. 3.html 예제를 함수로 정리정돈하면서 함수만으로 처리하는 것이 조금 우아하지 않은 단계까지 해보자. WEB网络 计算机语言-常见语言 HTML超文本标记语言 CSS层叠样式表 JavaScript -JavaScript JavaScript即全球广域网,也称为万维网,它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建..
WEB2 - JavaScript 24 to 27 (함수, function)
·
youtube.com|user|egoing2/WEB2 - JavaScript
함수(function) 예고 함수 하면 떠오르는 것이 수납상자이다. 살면서 집에 살림이 많아지면 수납상자를 장만해서 정리정돈을 한다. 이와 마찬가지로 코드가 많아지면 이것을 잘 정리 정돈하기 위한 도구들이 필요하다. 그 첫 번째로 생각할 아주 간단하면서도 강력한 도구가 함수이고, 이것보다 좀 더 큰 도구는 객체라는 것도 있다. 이번 시간에는 먼저 함수를 살펴보자. Ex) 3.html 예제에서 태그 안에 onclick 속성 안에 JS 가 있는데 이 태그가 1억 개가 있다고 가정하자. 그리고 그 안에 있는 style.color 를 다 바꿔야 한다고 가정하자. 다 바꿀 수 있을까? 또 여러 개의 태그가 있는데 어느 정도 길이가 길어지면 서로 같다는 것을 눈으로 확인하기 어렵다. 이럴 때를 가정하여 함수를 사용..
WEB2 - JavaScript 23 (배열과 반복문의 활용)
·
youtube.com|user|egoing2/WEB2 - JavaScript
배열과 반복문의 활용 배운 내용을 가지고 주간 모드에서와 야간 모드에서 링크 목록을 뚜렷하게 만들어보자. 먼저 3.html 웹페이지에서 개발자도구, 검사로 들어가 console 에서 이 웹페이지에 있는 모든 a 태그를 가져와 보자. document.querySelector('a') 라고 입력하면 하나만 가지고 온다. querySelector 라고 하는 저 메소드, 함수, 명령(다 같은말)은 a태그에 해당되는 첫 번째 것만 가지고 오는 특성을 가지고 있기 때문. 추천 검색어 javascript get element by css selector multiple 추천 검색어 javascript querySelectorAll 이것을 alist 라는 변수에 담고 console.log( ); 을 입력 console..
WEB2 - JavaScript 19 to 22 (반복문, 배열)
·
youtube.com|user|egoing2/WEB2 - JavaScript
반복문의 예고 예제에서 주간 모드와 야간모드 상태에서 링크들의 색상을 변경하려고 한다. 주간 모드일 경우 좀 더 어둡게, 야간 모드일 경우 밝게 즉 버튼을 눌렀을 때 모든 링크들의 스타일 속성 값을 바꿔주는 코드를 짜 보자. 그런데 만약 이렇게 바꿔야 할 링크가 1억개가 넘는다면? 이때 반복문이 필요하다. 배열(Array) (먼저 배열이 무엇인가를 알고 왜 필요한지는 반복문 수업에 가서 알자.) 집에 살림이 늘어날 수록늘어날수록 이 살림들을 수납할 수 있는 냉장고나 책장, 서랍을 구매하게 된다. 우리는 살림, 물건이 늘어날수록 이것들을 그 필요성에 따라 정리 정돈할 수 있는 여러 가지 수납공간들을 마련하게 된다. 프로그래밍도 마찬가지이다. 데이터가 많아짐에 따라서 그 데이터를 그냥 둘 수 없기 때문에 그..
WEB2 - JavaScript 18 (리팩토링 중복의 제거)
·
youtube.com|user|egoing2/WEB2 - JavaScript
리팩토링 중복의 제거 리팩토링(Refactoring) 코딩을 하고 나면 좀 비효율적인 면들이 생기기 마련이다. 그러면 동작하는 것은 그대로 두고 코드 자체를 아주 효율적으로 만들어서 그 코드의 가독성을 높이고 유지보수를 하기 편리하게 만들고, 중복된 코드를 제거하는, 다시 개선하는 작업 리팩토링의 사례 - 3.html 예제에서 비효율적인 것들을 제거해보자. 먼저 야간모드 기능을 스크롤을 내려 웹페이지의 아래쪽에서도 사용하게 만들고 싶다는 가정. 코드 작성한 것을 동일하게 아래에 붙여 넣기 한다면 제대로 작동하지 않는다. (开启 버튼을 누르면 야간모드는 작동하나 웹페이지 상단 원래의 버튼만 关闭 로 바뀌고 아래 것은 바뀌지 않는다.) 붙여넣기한 코드의 id값을 구분해줘야 한다. WEB网络 计算机语言-常见语..