JavaScript
-
웹브라우저 자바스크립트 - inlineJavaScript/생활코딩 2018. 11. 29. 16:06
inline - https://opentutorials.org/course/1375/6759 이벤트를 설치하는 방법 중 인라인 방식이 있다. 태그 안에 이벤트가 속성으로 직접 들어가 있을 때 인라인 방식이라고 한다. this를 사용하여 이벤트를 발생시킬 수 있다. 인라인 방식의 장점태그에 해당되는 이벤트가 무엇인지 쉽게 찾을 수 있다. 인라인 방식의 단점태그에 직접 기술되기 때문에 html의 정보로서의 가치가 저하된다.태그를 제어하는 이벤트는 스크립트 부분에 기술하는 것이 더 바람직하다.
-
웹브라우저 자바스크립트 - 이벤트JavaScript/생활코딩 2018. 11. 29. 15:55
이벤트 - https://opentutorials.org/course/1375/6629 브라우저에서의 이벤트 : 사용자가 클릭했을때, 스크롤을 했을 때 등등의 일을 이벤트라고 한다. event target - 클릭을 할때 버튼을 누르는데 이때 버튼이 event target이다.event type- 클릭을 할때 버튼을 누르는데 이때 클릭을 할때가 event type이다.event handler - 어떠한 이벤트가 발생했을 때 실행할 코드들이다.
-
웹브라우저 자바스크립트 - 문서의 기하학적 특성JavaScript/생활코딩 2018. 11. 29. 15:31
문서의 기하학적 특성 - https://opentutorials.org/course/1375/7112 엘리먼트들의 크기, 위치와 엘리먼트들을 화면에 표시하기위해서 스크롤같은 것들을 제어하는 방법에 대한 내용이다. 요소의 크기와 위치자바스크립트와 웹브라우저가 제공하는 API를 이용해서 엘리먼트의 위치와 크기를 알아낼 수 있다. 하나의 div Coding [실행화면 및 콘솔창] div의 중첩 Coding [실행화면 및 콘솔창] Viewport :브라우저에서 사용자에게 보여주는 영역문서에서 viewport의 좌표를 알아야 한다. Coding [실행화면 및 콘솔창] 스크롤을 하게되면 pageYOffset 값이 스크롤한 만큼의 px로 표시된다. 스크롤제어사용자의 스크롤을 제어할 수 있다. Coding [실행화면 ..
-
웹브라우저 자바스크립트 - 조작 APIJavaScript/생활코딩 2018. 11. 28. 17:21
조작 API - https://opentutorials.org/course/1375/6746 Text객체의 정보를 조작할 수 있는 API이다. appendData()deleteData()insertData()replaceData()substringData() - 정보중에 일부정보만 가공하는 API 아래 예제를 통해 API를 모두 확인해 볼 수 있다.Cording everybody! data : start : end : 각 함수와 연결되어 있는 버튼을 같은 색상으로 표시함. [appendData(data)버튼 클릭시 실행화면] [deleteData(start, end)버튼 클릭시 실행화면] [insertData(start, data)버튼 클릭시 실행화면] [replaceData(start, end, dat..
-
웹브라우저 자바스크립트 - Text 객체JavaScript/생활코딩 2018. 11. 28. 16:32
Text 객체 - https://opentutorials.org/course/1375/6744 생활코딩에서 p태그는 Element노드이다.그 사이에 있는 '생활코딩'은 Text객체, Text노드이다.Text객체는 CharacterData를 상속받는다. CharacterData는 문서에서 나타나지는 않는다. 예제를 통해 Text객체에 접근하는 방법을 알 수 있다. Hello world Hello world해당 예제를 실행하고 콘솔창에서 확인해보면 아래와 같다. 빨간줄을 기준으로t1 변수를 만들어서 target1의 엘리먼트에 접근하여 firstChild를 통해 텍스트들을 알 수 있다. -> 공백이 없는 경우 t2 변수를 만들어서 target2의 엘리먼트에 접근하여 firstChild, nextSibling을..
-
웹브라우저 자바스크립트 - Document 객체JavaScript/생활코딩 2018. 11. 28. 16:20
Document 객체 - https://opentutorials.org/course/1375/6740 Document 객체는 돔의 시작점이며 문서 전체를 의미하는 노드이다. DOM에서 정의한 규격,인터페이스이다.HTMLDocument라는 구체적인 객체가 정의되어서 이것을 사용하게 된다.HTMLDocument객체는 전체를 대표하는 노드이다. 주요 API노드 생성 APIdocument 객체의 주요 임무는 새로운 노드를 생성해주는 역할이다. 이에 대한 내용은 노드 변경 API에서 학습했기 때문에 여기서는 언급하지 않는다.createElement()createTextNode() 문서 정보 APItitleURLreferrer - 어떤 사이트를 경유해서 왔는지에 대한 정보lastModified
-
웹브라우저 자바스크립트 - 문자열로 노드 제어JavaScript/생활코딩 2018. 11. 28. 16:09
문자열로 노드 제어 - https://opentutorials.org/course/1375/6738 텍스트로 노드를 변경하는 방법innerHTML자주사용하는 API읽기를 통해서 엘리먼트의 하위엘리먼트의 코드를 알 수 있다. HTML CSS [get버튼을 눌렀을 때 실행화면] [set버튼을 눌렀을 때 실행화면] outerHTML읽기를 통해서 엘리먼트와 하위엘리먼트의 코드를 알 수 있다. HTML CSS innerText, outerText읽기를 하면 태그가 제외된 상태로 읽히고쓰기를 하면 그 태그에 해당되는 내용이 아니라 태그내용 그대로가 반영된다. HTML CSS [get버튼을 눌렀을 때 실행화면] [set버튼을 눌렀을 때 실행화면] insertAdjacentHTML()정교하게 문자열을 이용해서 노드를 ..