점미의 스터디 점미의 스터디

JavaScript

• 웹브라우저 자바스크립트 - HTMLCollection

  JavaScript/생활코딩 2018. 11. 26. 14:26

  HTMLCollection - https://opentutorials.org/course/1375/6666 리턴되는 값이 복수인 경우 HTMLCollection이라는 객체의 element를 담아서 리턴한다. HTMLCollection의 목록은 실시간으로 변경된다. HTML CSS JavaScript [결과화면]

  Read More
• 웹브라우저 자바스크립트 - HTMLElement

  JavaScript/생활코딩 2018. 11. 26. 14:19

  HTMLElement - https://opentutorials.org/course/1375/6665 제어하고자 하는 element에 대한 객체를 찾아야함객체의 프로퍼티를 이용해서 객체의 이미지변경, 색변경 같은 작업을 하기위해서객체가 어떤역할을 하는 객체인지 이해가 필요하다. li변수에는 JavaScript 이 담기며lis변수에는 li태그로 되어있는 3가지 li들이 담긴다. HTML CSS JavaScript [결과화면] 각 각의 Element가 어떤 object인지 확인하는 예제opentutorials HTML CSS JavaScriptJavaScript 추상화한 객체의 이름은 HTMLLIElementopentutorials 추상화한 객체의 이름은 HTMLAnchorElement 추상화한 객체의 이름..

  Read More
• 웹브라우저 자바스크립트 - 제어 대상을 찾기

  JavaScript/생활코딩 2018. 11. 23. 17:06

  제어 대상을 찾기 - https://opentutorials.org/course/1375/6656 자바스크립트로 문서를 제어하려면 제어의 대상을 찾고 대상에 대한 작업을 해야한다. document.getElementsByTagName태그의 이름을 통해서 여러개의 엘리먼트를 가져온다. li태그들의 스타일을 제어한다. HTML CSS JavaScript [결과화면] ul태그안에 있는 li태그들의 스타일을 제어한다.(조회의 대상 좁히기) HTML CSS JavaScript HTML CSS JavaScript [결과화면] document.getElementsByClassNamehtml에서의 class는 자바스크립에서는 ClassName이다. HTML CSS JavaScript [결과화면] document.get..

  Read More
• 웹브라우저 자바스크립트 - DOM

  JavaScript/생활코딩 2018. 11. 23. 15:02

  DOM - https://opentutorials.org/course/1375/6655 DOM(Document Object Model)은 웹페이지를 제어하기 위한 객체 모델이다. window객체의 document속성을 사용하면 된다.window객체가 창이라면 document객체는 윈도우에 로드된 문서를 의미한다.

  Read More
• 웹브라우저 자바스크립트 - 창 제어

  JavaScript/생활코딩 2018. 11. 23. 14:58

  창 제어 - https://opentutorials.org/course/1375/6651 자바스크립트를 이용해서 새로운 창을 열고닫는 방법 창과 창 사이에 커뮤니케이션 하는 방법에 대한 내용 window.open을 사용하여 윈도우 창을 제어할 수 있다. 첫번째 인자는 새 창에 로드할 문서의 URL이다. 인자를 생략하면 이름이 붙지 않은 새 창이 만들어진다. 두번째 인자는 새 창의 이름이다. _self는 스크립트가 실행되는 창을 의미한다. _blank는 새 창을 의미한다. 창에 이름을 붙일 수 있다. open을 재실행 했을 때 동일한 이름의 창이 있다면 그곳으로 문서가 로드된다. 세번재 인자는 새 창의 모양과 관련된 속성이 온다. [실행화면] 새 창에 접근 보안상의 이유로 아래 내용은 서버를구축한 상태에서..

  Read More
• 웹브라우저 자바스크립트 - Navigator객체

  JavaScript/생활코딩 2018. 11. 22. 16:46

  Navigator객체 - https://opentutorials.org/course/1375/6650 Navigator객체 - 현재 자바스크립트가 실행되고 있는 브라우저의 버전을 알 수 있는 기능 아래 코드를 콘솔창에 치면 Navigator객체가 가지고 있는 프로퍼티들을 모두 확인 할 수 있다. console.dir(navigator); Navigator객체의 프로퍼티 종류들 console.dir(navigator.appName); - appName은 브라우저의 이름이다. 이것으로 브라우저를 식별할 수는 없다. 크롬, 파이어폭스는 Netscape라고 나오기 때문이다. console.dir(navigator.appVersion); - 브라우저에 대한 자세한 정보가 나온다. -> 5.0 (Windows NT..

  Read More
• 웹브라우저 자바스크립트 - Location객체

  JavaScript/생활코딩 2018. 11. 22. 15:33

  Location객체 - https://opentutorials.org/course/1375/6634 Location객체 - 현재 브라우저창에 문서의url을 알려주는 객체 URL에 대한 정보 확인 F12를 눌러 콘솔창에서 아래의 코드를 입력하면 현재 url을 알려준다.location.toString()과 location.href 둘다 같은 결과를 출력한다.실제로는 location.href를 더 많이 사용하고 있다. console.log(location.toString(), location.href); Location객체를 사용하여 url의 여러가지 정보를 알아낼 수 있다. console.log(location.protocol) - http, https 둘 중 하나를 반환한다.console.log(locat..

  Read More
• 웹브라우저 자바스크립트 - 사용자와 커뮤니케이션 하기

  JavaScript/생활코딩 2018. 11. 22. 15:08

  사용자와 커뮤니케이션 하기 - https://opentutorials.org/course/1375/6632 BOM중에서 사용자와 커뮤니케이션하는 방법에 대한 사례이다.사용자에게 정보를 제공하거나 사용자가 정보를 입력하게 해서 사용자가 입력한 정보를 받아서 처리하는 방법이다. alert경고창, 변수나 함수가 리턴하는 값을 확인할 때도 사용한다.경고창을 실행되는 동안은 그 다음코드가 실행되지 않는다. [실행화면] confirm경고창을 띄우지만 alert와 다르게 확인,취소 버튼이 있다.확인을 누를경우 return값은 true, 취소를 누를경우 return값은 false를 반환한다. [실행화면] prompt사용자가 입력한 값을 받아서 javascript가 얻어낼 수 있는 기능이다. [실행화면]

  Read More