web2 (11) 썸네일형 리스트형 WEB2 - JavaScript_29-30 수업을 마치며 29. UI vs API UI (User Interface): 사용자가 시스템을 제어하기 위해서 사용하는 조작장치 (e.g 버튼) API (Application Programming Interface): 애플리케이션을 만들기 위해서 프로그래밍 할 때 사용하는 조작장치 (e.g js의 alert) 웹 페이지에 경고창을 만들기 위해서 사용하는 alert 함수는 경고창을 실행하는 조작장치로서 브라우저에 미리 만들어 놓은 기능이다. 우리는 이번 수업을 통해 UI만 사용했던 사용자에서 JavaScript를 통해 API까지 사용할 수 있는 사람이 되었다. 30. 수업을 마치며 이제 학습을 그만두고 프로젝트를 시작할 때. 프로젝트를 시작할 때 모든 개념을 한 번에 사용하려고 하지 말자. 최소한의 정도로만 (i.e. .. WEB2 - JavaScript_28 라이브러리와 프레임워크 28. 라이브러리와 프레임워크 소프트웨어를 만들 때 다른 사람들이 미리 만들어 놓은 소프트웨어의 도움을 받는 방법. 라이브러리(Library): 사용할 수 있는 단편적인 기능을 정리해 놓은 것 (부품) 프레임워크(Framework): 만들고 싶은 소프트웨어의 기초적인 공통 부분을 구축해 놓은 것 (반제품) jQuery JavaScript의 대표적인 라이브러리이다. jQuery 홈페이지에 가서 파일을 다운로드 한 뒤 직접 프로젝트에 포함시키거나 CDN을 이용하여 웹 페이지에 첨부한다. CDN (Content Download Network) : 서비스 제공자의 서버에 저장된 파일을 를 이용해 가져와 사용하는 방식. jQuery에서 제공하는 코드를 복사해서 html 파일의 영역에 붙여넣어 사용한다. jQuer.. WEB2 - JavaScript_27 파일로 쪼개서 정리정돈하기 27. 파일로 쪼개서 정리정돈하기 프로그램이 복잡해지면 객체보다 더 큰 정리정돈의 도구가 필요하게된다. → 연관된 코드들을 별도의 파일로 나눠서 정리 할 수 있다. 지금까지 만들어 놓은 모든 웹 페이지에 night & day handler를 만들고 싶으면 지금까지 작성한 JavaScript를 별도의 파일로 저장해서 쓰면 동일한 기능은 동일한 코드로 이뤄져있다는 확신을 할 수 있을뿐만 아니라 수정하기도 용이하다. WEB2 - JavaScript_24-26 객체 24. 객체 예고 객체의 다면적인 기능 중 '정리정돈'의 역할에 초점을 맞춰서 설명 정리 정돈을 위한 변수, 함수도 그 수가 많아지면 관리가 어렵다. → 객체를 이용하면 연관된 변수와 함수를 하나로 묶어서 관리할 수 있다. 지금까지 만든 nightDayHandler 함수를 보면 색상을 바꾸는 모든 코드가 night과 day에서 중복된다. 우선, 함수를 여러개로 분할해서 중복을 줄일 수 있다. 함수명이 같으면 가장 아래있는 함수만 실행되기 때문에 함수를 여러개 사용할 때는 이름을 다르게 적어줘야한다. 함수명은 함수 기능을 파악할 수 있도록 적는게 좋다. /* Body의 Color를 매개변수 color로 변경 */ function bodySetColor(color) { document.querySelecto.. WEB2 - JavaScript_21-23 함수 21. 함수 예고 함수: 많아지고 복잡해진 코드를 정리정돈하는 용도 동일한 JavaScript를 실행하는 버튼이 많아지면 해당 JavaScript를 모든 버튼에서 동일하게 유지하거나 일괄적으로 수정하기 어렵다. → 중복된 JavaScript 코드를 함수로 만들어서 실행. 함수는 다음과 같이 정의한 뒤 사용할 수 있다. 세부적인 사항은 이후 강의에서 설명 /* 함수를 정의 */ /* 이전에 onclick의 속성 값으로 입력했던 코드를 잘라내서 붙여 넣는다*/ function nightDayHandler(self) { var target = document.querySelector('body') if(self.value === night) { target.style.backgroundColor = 'blac.. WEB2 - JavaScript_16-20 배열과 반복문 16. 반복문 예고 링크의 색상도 테마에 맞춰서 바꾸고 싶을 때 (day: blue, night: powderblue): 반복문을 이용해서 모든 링크 element 의 색상을 바꾸는 작업을 반복할 수 있다. 17. 배열 (Array) 프로그래밍은 많은 데이터를 다루기 때문에 연관된 데이터를 정리해서 담을 수 있는 수납함 역할을 하는 배열(array) 이 존재한다. 배열은 대괄호([])를 사용해서 만든다. /* 변수 coworkers에 배열을 대입 */ /* 배열을 이루는 elements는 comma를 이용해 구분 */ var coworkers = ['egoing', 'leezche'] 배열안의 각 데이터는 index를 이용해 호출한다. /* 첫 번째 요소: egoing을 출력 */ document.wri.. WEB2 - JavaScript_15 리팩토링(Refactoring) 15. 리팩토링 (Refactoring) 코드를 일차적으로 완성한 뒤 비 효율적인 부분을 제거하고 코드를 개선하는 작업. 전 강의에서 작성한 코드를 보면 중복된 부분이 많다. if (document.querySelector('#night_day').value === night) { document.querySelector('body').style.backgroundColor = 'black'; document.querySelector('body').style.color = 'white'; document.querySelector('#night_day').value = 'day'; } else { docum.. WEB2 - JavaScript_11-14 조건문 11. 조건문 예고 프로그래밍 언어를 이용하면 조건에 따라 다른 순서로 기능을 실행할 수 있다. 조건문을 이용하면 이전에 만들었던 day & night 버튼을 1개의 버튼으로 합칠 수 있다. 12. 비교 연산자와 Boolean 데이터 타입 두 개의 값을 비교할 수 있은 연산자가 있다. 이를 비교 연산자라고 한다. a === b는 a와 b가 같은 값인지 비교한다. a와 b가 같으면 true를 반환한다. (e.g 1 === 1) a와 b가 다르면 false를 반환한다. (e.g 1 === 2) a < b는 a가 b보다 작은 값인지 비교한다. a가 b보다 작으면 true를 반환한다. (e.g 1 < 2) a가 b보다 작지 않으면 false를 반환한다. (e.g 2 < 1) 이처럼 반환 값으로 true 혹은 f.. 이전 1 2 다음