JavaScript/생활코딩6 5/10(2) 생활코딩 - JavaScript 完 오늘의 진도: WEB2 - JavaScript 파일로 쪼개서 정리정돈하기~수업을 마치며 1. 파일로 쪼개서 정리정돈하기 파일 또한 정리정돈의 도구이다. 서로 연관된 코드들을 파일로 묶어서 그룹핑할 수 있다. night 버튼이 있는 input 태그를 다른 웹페이지에 배포해보자. 회색으로 표시한 부분을 복사해서 다른 웹페이지에 붙여넣으면 잘 작동하지 않는다. 자바스크립트는 따라가지 않았기 때문. 이 때 colors.js라는 파일을 만들고, 공통적으로 들어가는 코드를 카피해서 붙여넣는다. ※ script 태그가 들어가면 안 된다! 그리고 모든 웹페이지의 head 안에 script src="colors.js" 코드를 추가하면 정상적으로 작동한다. 2. 라이브러리와 프레임워크 다른 사람이 만든 SW를 부품으로 해.. 2020. 5. 11. 5/10 생활코딩 오늘의 진도: WEB2 - JavaScript 객체 예고~객체 활용 1. 객체(object) 예고 객체는 함수라는 기반 위에서 존재하는 것이다. 객체의 다면적인 얼굴 중 딱 하나만 볼 것이다. 객체 또한 정리정돈의 수단이다. 서로 연관된 함수와 서로 연관된 변수를 같은 이름으로 그룹핑해서 잘 정리정돈하기 위한 도구이다. night 버튼 코드에서 회색으로 표시한 두 부분이 파우더블루와 블루만 다르고 중복되는 것을 볼 수 있다. 해당 부분을 setColor라는 함수로 만들고 color라는 매개변수를 정한 후, 코드 안의 파우더블루를 color로 바꿨다. 그리고 원래 코드가 있던 자리로 가서 원래 코드를 지우고 setColor라는 함수를 쓰고 파우더블루와 블루를 각각 써준다. → 완성 target.style... 2020. 5. 9. 5/9(2) 생활코딩 오늘의 진도: WEB2 - JavaScript 함수예고~함수의 활용 1. 함수(function) 예고 (1) 함수의 기본 함수는 수납상자처럼 코드들을 정리정돈하기 위한 도구이다. 야간모드 버튼을 함수로 만들어보자. 야간모드 코드를 잘라내서 head 안에 script 태그 안에 붙여넣었다. (꼭 head 안에 할 필요는 없다.) 그리고 이것을 nightDayHandler라는 이름의 함수로 만들었다. nightDayHandler 뒤의 괄호 안에 self를 쓰고, 기존의 this들을 모두 self로 바꾸었다. body에 input에 onclick에 nightDayHandler라고 쓰고 괄호 안은 this로 바꿨다. 이렇게 하면 nightDayHandler라는 함수를 실행시키라는 뜻이 된다. 2. 함수 (1) .. 2020. 5. 9. 5/9 생활코딩 오늘의 진도: WEB2 - JavaScript 반복문 예고~배열과 반복문의 활용 1. 반복문 예고 night 버튼의 불만족 하나 더 - night 모드에서 링크 글자 색깔이 너무 어두워서 잘 안 보인다. → 얘를 클릭했을 때, 이 웹페이지에 있는 모든 링크의 style 속성값을 밝게 바꿔주는 코딩을 할 것이다. 이 웹 페이지에 있는 모든 태그를 가져온 다음에 그 태그 하나하나에 대해서 반복적으로 powder blue 컬러를 지정한다는 내용의 코드이다. 다음 시간부터는 배열과, 배열을 이용해서 반복적인 작업을 처리하기 위한 반복문을 배울 것이다. 2. 배열(array) 집에 살림이 늘어나면 점점 마음이 힘들어지고 책장이나 수납상자 등을 사거나 방이 여러개 있는 집으로 이사를 갈 수도 있다. 이런 식으로 집.. 2020. 5. 9. 5/8(2) 생활코딩 오늘의 진도: WEB2 - JavaScript 조건문 예고~리팩토링 조건문: 하나의 프로그램이 하나의 흐름으로 가는 것이 아니라 조건에 따라서 다른 순서의 기능들이 실행되도록 하는 것 11. 조건문 예고 night/day 버튼에서의 불만족 : 버튼이 두 개가 있는게 불편하다. 그래서 하나의 버튼으로 night 상태에서 클릭하면 day 모드가 되고, day 상태에서 클릭하면 night 모드가 되게 만들고 싶다. = toggle 12. 비교 연산자와 Boolean 데이터 타입 JavaScript의 여러 기능 중에서 비교 연산자(Comparison operator)라는 것과, 그 비교 연산자를 통해 만들어지는 '불리언(boolean)'이라는 새로운 데이터 타입, 그리고 조건문이라는 것을 연달아 같이 살펴볼 것.. 2020. 5. 9. 이전 1 2 다음
