전체 글 (83) 썸네일형 리스트형 [JavaScript] BOM(Browser Object Model) window 객체 - window 객체는 자바스크립트의 최상위 객체이며 BOM과 DOM으로 나뉜다. BOM(Browser Object Model) : location 객체, navigator 객체, history 객체, screen 객체 DOM(Document Object Model) : document 객체 window 객체 - 브라우저 창에 대한 설정을 하는 객체 window.open('주소', '이름 또는 open 방식', '형태'); 13_문서수정 네이버 화면 높이랑 실제 화면에서 사용 가능한 높이가 다른 이유는 작업표시줄 여부에 따라 다름 location 객체 - 브라우저 주소 표시줄과 관련된 객체 실행확인 네이버로 이동 네이버로 이동 새로고침 새로고침 현 위치에서 새로고침 구글로 이동 navi.. [JavaScript] 문서 수정 노드 생성 document.createElement(tag) : 태그 이름을 사용해 새로운 요소를 만든다 document.createTextNode(value) : 텍스트 노드를 만든다. (잘 쓰이지 않음) element.cloneNode(deep) : 요소를 복제함. deep == true 일 경우 모든 자손 요소도 복제한다. 노드 삽입, 삭제 node.append(노드나 문자열) : node 끝에 노드나 문자열을 삽입 node.prepend(노드나 문자열) : node 맨 앞에 노드나 문자열을 삽입 node.before(노드나 문자열) : node 이전에 노드나 문자열을 삽입 node.after(노드나 문자열) : node 이후에 노드나 문자열을 삽입 node.replaceWith(노드나 문자열) :.. [JavaScript] 요소 검색 원하는 요소 노드에 접근하기 document.getElementById - 요소에 id 속성이 있으면 위치에 상관 없이 (부모, 자식, 형제 등의 상대적 위치와 관계 없이) document.getElementById(id) 메소드를 통해 접근할 수 있다. - id 속성 값을 그대로 딴 전역 변수를 이용한 접근도 가능하지만 해당 id 값과 동일한 변수가 생기는 이름 충돌 가능성이 있어 지양하는 것이 좋다. - 문서 내의 id 속성 값을 중복 되어서는 안되며 중복 된다면 document.getElementById 메소드 동작에 문제가 발생한다. div 영역 p 영역 클릭 할 때 마다 색상 변경 element.querySelector('선택자') : 제공한 선택자와 일치하는 element 내의 첫 번째 ele.. [JavaScript] DOM(Document Object Model) DOM(Document Object Model) - HTML에 있는 태그를 객체화하여 자바스크립트에서 다룰 수 있게 한 것 - 모든 노드 객체에 접근할 수 있는 요소와 메소드를 제공한다. - HTML에 있는 태그를 구조화(트리) 했을 때 각각의 태그가 노드이다. - 요소 노드(Elements Node) : 태그 그 자체를 의미한다. - 텍스트 노드(Text Node) : 태그에 기록 되어 있는 문자를 의미한다 * 텍스트 노드를 가지는 태그(h?, p)와 가지지 않는 태그(img 등)가 있음 DOM 탐색하기 documentElement, head, body function test1(){ console.log("-- HTML --"); console.log(document.documentElement); .. [JavaScript] 숫자, 문자, 날짜 다루기 숫자 문자 날짜 다루기 숫자 관련 메소드 isNaN(value) : 인수를 숫자로 변환한 다음 NaN(Not a Number : 에러를 나타내는 값)인지 테스트한다. isFinite(value) : 인수를 숫자로 변환하고 변환한 숫자가 NaN/Infinity/-Infinity가 아닌 일반 숫자인 경우 true를 반환 function test1(){ console.log('isNaN(NaN) : ' + isNaN(NaN)); console.log("isNaN('abc') : " + isNaN('abc')); console.log("isNaN('1') : " + isNaN('1')); console.log("isNaN(2.8) : " + isNaN(2.8)); console.log("isFinite('1').. [JavaScript] 객체 객체 - 다른 자료형은 오직 하나의 데이터만 담을 수 있는 원시형(primitive type)이지만 객체는 다양한 데이터를 담을 수 있다. 객체 선언 및 호출 - 객체는 프로퍼티(키-값 쌍)를 저장하며 키 값을 사용하여 속성을 식별한다. - 키는 문자열이며 속성에는 모든 자료형이 올 수 있다. - 객체 생성자 또는 중괄호 {} 를 사용하여 객체를 생성한다. function test1() { //객체 생성자 호출 let obj = new Object(); //객체 리터럴 선언 let obj2 = {}; let product = { //키-값 쌍으로 구성된 프로퍼티 pName : 'Dry Mango', origin : 'Phillipines', price : 10000, ingredient : ['mango.. [JavaScript] 함수-2, 배열 함수의 반환형 - return문이 없거나 return 지시자만 있는 함수는 undefined를 반환 1~100 사이의 랜덤값을 반환하는 함수 콜백 함수 배열이란? - 자바스크립트에서는 "모든 자료형"을 보관하는 변수의 모음을 배열로 처리한다. - 자바에서의 컬렉션과 유사하다. 문자열과 더해지면서 toString() 호출하여 "," 기준으로 합쳐진 문자열이 반환됨 console.log('arr : ' + arr); 인덱스로 접근 console.log(arr[0]); console.log(arr[1]); console.log(arr[2]); console.log(arr[3]); 배열 안의 배열 인덱스 접근 console.log(arr[3][0]); console.log(arr[3][1]); console.l.. [JavaScript] 형변환, 연산자, 함수 문자형변환 alert 메소드의 매개변수는 문자형이므로 alert(value)에서 value가 다른 타입이면 문자형으로 자동 변환 된다. 또한 String(value) 함수 호출로 변환할 수도 있다. 숫자형변환 수학과 관련 된 함수와 표현식에서 자동으로 변환 된다. 또한 Number(value) 함수 호출로 변환할 수도 있다. 논리형변환 논리 연산 수행 시 발생한다. 또한 Boolean(value) 함수 호출로 변환할 수도 있다. 문자열과 숫자의 '+' 연산 문자열 + 숫자 = 문자열 숫자 + 숫자 + 문자열 = 숫자가 먼저 계산 되고 뒤의 문자열과 합쳐진다 기본적인 연산자의 사용과 우선 순위 등은 Java와 크게 다르지 않으나 차이가 있는 부분에 대해서만 확인해보자. 비교 연산자를 통한 문자열 비교 - .. 이전 1 2 3 4 5 6 7 ··· 11 다음
