공부를 합니다/언어 (Language) (26) 썸네일형 리스트형 웹브라우저 자바스크립트_4 Object Model 4. Object Model JavaScript가 제어의 역할을 한다는 것은 JavaScript가 제어할 수 있는 '무언가'가 존재한다는 뜻이다. Object를 그 '무언가'로 생각하면 편하다. Object Model: 브라우저와 웹 페이지의 여러 구성 요소들을 object로 만들어 제공하는 것. 웹 페이지의 element를 JavaScript가 제어할 수 있도록 브라우저가 웹 페이지를 읽는 과정에서 element에 해당하는 object를 생성한다. Example /* 태그를 제어할 수 있는 object 찾기 */ /* getElementByTagName을 이용하면 해당하는 Tag Element들을 list로 return */ var imgs = document.getElementByTagName('im.. 웹브라우저 자바스크립트_1-3 웹 브라우저와 JavaScript 1. 웹 브라우저와 JavaScript 웹 브라우저는 'HTML' + 'CSS' + 'JavaScript'로 이루어져있다. HTML이 웹 페이지의 정보(콘텐츠)를 생성하고 CSS로 그 정보를 디자인한다면, JavaScript는 프로그래밍적으로 이들과 웹 브라우저를 제어한다. 예를 들어, HTML으로 작성한 글의 색상을 CSS로 변경할 수 있고, JavaScript를 이용하면 버튼을 '클릭'했을 때 글의 색을 변경할 수 있도록 만들 수 있는 것이다. 2. 실습환경 skip 3. HTML에서 JavaScript 로드하기 Inline 방식 (event 이용) HTML 태그 안에 직접 입력해서 JavaScript를 쓸 수 있다. 장점: JavaScript.. [생활코딩] 웹브라우저 자바스크립트 강의소개 생활코딩 에서 제공하는 JavaScript 강의. 언어 자체는 서적으로 공부하고 우선 활용할 정도를 만들기 위해 자바스크립트언어 자체 강의가 아니라 웹브라우저 응용 강의를 듣기로 결정 강의주소: https://opentutorials.org/course/1375 수강기간: 2020.05.13 - 진행중 수강소감 강의내용 (정리중) 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.. 이전 1 2 3 4 다음
