본문 바로가기

프로그래밍 공부/JavaScript

 (55)
JavaScript - 문서 객체 스타일 조작 / 문서 객체 제거 문서 객체의 스타일을 조작하려면, 일단 문서 객체를 가져온 다음에 style 속성을 사용해 바꾸면 된다. 입력 방식은 CSS3에 입력하는 방식과 비슷하지만 background-color, background-image 또는 box-sizing 같이 -가 들어가는 경우 backgroundColor, backgroundImage 그리고 boxSizing등으로 -를 제거하고 뒤에있는 단어의 시작을 대문자로 바꿔주어서 나뉘지않고 하나로 쓸수 있게 변경해야 한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 Document window.onload=function(){ let header1=document.getElementById('header1'); let ..
JavaScript - 문서 객체 선택 웹 페이지에 존재하는 HTML 태그를 가져오는 방법은 여러가지가 있는데, HTML 태그에서 개발자가 지정한 id 선택자를 이용해 그 아이디를 선택해 가져오는 방법이 있다. 메서드 이름 설명 getElementById(id) 태그의 id 속성이 매개변수와 일치하는 객체를 선택 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Document window.onload=function(){ // getElementById() 메서드로 각각 id가 'header-1' // 그리고 'header-2'인 html 태그를 선택한다. let header1=document.getElementById('header-1'); let header1=document..
JavaScript - 문서 객체 생성 html 태그 안에 body 태그에 내용이 없다면 아무것도 출력되지 않는다. 하지만 script를 이용해서 body 태그에 동적으로 문서 객체를 넣을 수 있다. 문서 객체를 생성하려면 요소 노드(Element Node)와 텍스트 노드(Text Node)를 생성하고 텍스트 노드를 요소 노드에 연결 시켜야 한다. 메서드 이름 설명 document.createElement(tagName) 요소 노드를 생성한다. document.createTextNode(text) 텍스트 노드를 생성한다. 1 2 3 4 window.onload=function(){ let header = document.createElement('h1'); let textNode = document.createTextNode('Document..
JavaScript - 문서 객체 모델 개요 문서 객체 모델에서는 태그, 문서 객체, 노드라는 용어를 사용하게 된다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 Document window.onload=function(){ let header=document.getElementById('header'); }; HEADER Colored by Color Scripter cs HTML 페이지에 존재하는 html이나 body 태그를 '태그'라고 부른다. 이 태그를 자바스크립트에서 이용할 수 있는 객체로 만들면 그것이 '문서 객체'이다. 위의 코드에 doucument 객체의 getElementById() 메서드로 id가 header인 를 가져와서 조작할 수 있는데, 이때 header 객체를 '문서 객체'라고 부른다. 'Document' '..
JavaScript - 브라우저 객체 모델 / onload 이벤트 속성 / Audio 객체 window 객체 window 객체는 많은 속성과 메서드가 존재한다. window 객체는 자바스크립트의 브라우저 기반 최상위 객체 이기도 하다. 기존에 사용하던 alert()나 prompt() 함수 모두 window 객체의 메서드 이다. 그리고 var이나 let으로 선언한 변수도 window 객체의 속성이 된다. 새로운 window 객체를 생성하려면 아래와 같은 메서드를 사용한다. 메서드 이름 설명 open(URL, name, features, replace) 새로운 window 객체를 생성한다. window 객체의 open() 메서드는 4개의 매개변수를 사용하는데, 이것은 입력을 해도 되고 안해도 되는 매개변수이고, 이것을 '옵션(option)이라고 한다. window.open() 위와 같은 코드를 사..
JavaScript - 브라우저 객체 모델 개요 브라우저 객체 모델(BOM, Browser Object Model)은 웹 브라우저와 관련된 객체의 집합을 의미하는 것이다. 대표적인 브라우저 객체 모델은 window, location, navigator, history, screen, 그리고 document 객체가 존재한다. window 객체 location 객체 navigator 객체 history 객체 screen 객체 document 객체 보통 window 객체 안에 location 객체, navigator 객체, history 객체, screen 객체, 그리고 document 객체가 있는 관계를 가지는데, 더 세분하게 나누면 document 객체는 문서 객체 모델(DOM, Document Object Model)로 그 외에는 브라우저 객체 모델이..
JavaScript - 기본 내장 객체 심화 ECMAScript 5부터 추가된 메서드를 다룬다. Array 객체 메서드 이름 설명 Array.isArray() 배열인지 아닌지를 확인한다. typeof 키워드로 Array 객체의 자료형을 확인하면 Object로 나온다. 따라서 Array 객체임을 확인하려면 construct() 메서드로 자료형을 비교하는 방법을 응용하는 식으로 확인을 하게 되는데 그런 귀찮은 방법을 이용하지않고 위의 메서드를 사용하면 해당 변수가 Array 객체 인지 쉽게 ture와 false로 표기되어 알 수 있다. // true 출력 alert(Array.isArray([1, 2, 3])); // false 출력 alert(Array.isArray({})); // false 출력 alert(Array.isArray(1)); // ..
JavaScript - Math 객체 Math 객체는 자바스크립트의 기본 내장 객체 중 유일하게 생성자 함수를 사용하지 않는 객체다. 또 Math 객체는 이름 그대로 수학과 관련된 속성과 메서드를 가지고 있다. 먼저 Math 객체의 속성(Attribute)은 8가지가 있다. 속성 이름 값 E 2.718281828459045 LN2 0.6931471805599453 LN10 2.302585092994046 LOG2E 1.4426950408889634 LOG10E 0.4342944819032518 PI 3.141592653589793 SQRT1_2 0.7071067811865476 SQRT2 1.4142135623730951 Math 객체는 생성자 함수가 아니라 그냥 객체이므로 아래와 같이 사용한다. // 2.718281828459045 출력 ..

티스토리툴바