도슐랭스타

이번 글에서는 DOM(2)에서 공부한 내용을 바탕으로 직접 새 요소 노드를 만들고 연결하는 것을 해보겠습니다. ↓ DOM(2)를 보지 않았다면 요기로! ↓ JavaScript-DOM(문서 객체 모델) 요소 추가와 노드 삭제/순서배열(2) createElement() 함수 새 요소를 만드는 함수이다. document.createElement("추가할 요소"); createTextNode() 함수 텍스트 요소를 만드는 함수이다. document.createTextNode("추가할 텍스트"); appendChild() 함수 노드를 연 dodo5517.tistory.com 안녕하세요. 아무것도 없는 html 소스에 이 텍스트 단락을 추가해 보겠습니다. 요소 노드 만들기 - createElement() 함수 안녕..

드디어 제가 예제를 가져왔습니다. 이번에는 DOM(1)에서 배운 것을 바탕으로 몇 가지만 실습을 해보겠습니다. JavaScript-DOM(문서 객체 모델) 요소에 접근하기(1) DOM(Document Object Model, 문서 객체 모델) 객체를 사용해 웹 문서를 관리하는 방식. 웹 문서의 모든 요소를 객체로 해석할 수 있다. DOM트리 DOM의 구조는 나무처럼 생겼다. 안녕하세요. 반가워요. 위의 dodo5517.tistory.com ↑ 아직 DOM(1)을 보지 않았다면 요기로! ↑ ↓ 실습 파일은 요기! ↓ id 선택자로 접근하기 - getElementById() 함수 id 선택자를 사용하여 heading에 접근해서 "카미유 피사로"를 누르면(onclick) 색이 변하는 함수가 작동하도록 해보겠습..

createElement() 함수 새 요소를 만드는 함수이다. document.createElement("추가할 요소"); createTextNode() 함수 텍스트 요소를 만드는 함수이다. document.createTextNode("추가할 텍스트"); appendChild() 함수 노드를 연결하는 함수이다.(자식 노드로 추가한다.) 부모가 될 노드.appendChild(자식이 될 노드); createAttribute() 함수 속성 노드를 만드는 함수이다. setAttributeNode() 함수 속성 노드를 요소 노드에 연결하는 함수이다. hasChildNodes() 함수 특정 노드에 자식 노드가 있는지 확인하는 함수이다. 자식 노드가 있다면 true, 없다면 false를 반환한다. childNodes..

DOM(Document Object Model, 문서 객체 모델) 객체를 사용해 웹 문서를 관리하는 방식. 웹 문서의 모든 요소를 객체로 해석할 수 있다. DOM트리 DOM의 구조는 나무처럼 생겼다. 안녕하세요. 반가워요. 위의 코드는 옆의 그림처럼 구조화할 수 있다. 거꾸로 뒤집은 나무와 비슷하게 생겨서 DOM 트리(tree)라고 한다. 네모 상자를 노드(Node)라고 하며 위쪽에 위치하면 부모 노드, 아래에 위치하면 자식 노드이다. ex) h1은 body의 자식 노드이자 "안녕하세요."의 부모 노드이다. DOM 요소에 접근하는 함수 getElementById() getElementsByClassName() getElementsByTagName() querySelector() querySelectorA..

배열(array) 여러 개의 항목을 하나의 변수에 저장할 때 사용한다. 객체 리터럴을 사용하거나 인스턴스로 배열을 만들 수 있다. var nums = [1,2,3]; //리터럴을 사용한 배열 var nums = new Array(1,2,3); //Array 객체를 사용한 배열 length 속성 배열에 몇 개의 요소가 있는지 알고 싶을 때 사용한다. var nums = [1,2,3]; nums.length for문과 length를 사용해서 모든 요소들을 확인할 수도 있다. var nums = [1,2,3,4,5]; for(let i = 0; i < nums.length; i++){ console.log(nums[i]); } concat() 함수 배열과 다른 배열의 값을 합쳐서 새로운 배열을 만드는 함수이다..

객체 '복합 자료형'이다. 객체 안에 숫자, 문자열 등 여러 가지 자료형이 포함되기 때문이다. 언제 사용하는가? 회원 정보를 저장한다면 이름, 아이디, 비밀번호, 생년월일, 가입 날짜, 이메일 등 여러 정보가 하나에 저장된다. 나중에 회원 정보를 확인하거나 수정할 때 '회원'이라는 변수 하나에 여러 정보를 저장하는 것이 편하므로 변수인 '회원'을 하나의 객체로 만든다. 내장 객체(Built-in-Object) 자주 사용하는 요소를 자바스크립트에서 '미리' 만들어 둔 객체이다. Date, Number, Boolean, Array, Math 등 많은 내장 객체가 있다. 문서 객체 모델(DOM) 객체를 사용해 웹 문서를 관리하는 방식이다. 이미지, 링크, 텍스트 필드 등 각각 별도의 객체로 미리 만들어져 있다..

스코프(scope) 변수를 선언하고 변수가 적용되는 범위. 지역 변수, 전역 변수 지역 변수/로컬 변수(local variable) : 한 함수 안에서만 사용할 수 있는 함수. 전역 변수/글로벌 변수(global variable) : 소스 전체에서 사용할 수 있는 함수. 함수 안에서 전역 변수를 선언하고 싶다면 var 예약어를 사용하지 않으면 된다. var num = 500; // 전역 변수 선언 globalTest(); document.write("globalVar = "+num+" "); localTest(); function globalTest() { var num = 100; //지역 변수 선언 } function localTest() { var num = 100; //지역 변수 선언 docume..

함수(Function) 함수 : 처리해야 할 과제에 따라 기능별로 여러 명령을 묶어 놓은 것. 자바스크립트는 소스를 해석할 때 함수 선언 부분을 가장 먼저 해석한다. -> 선언한 위치와 상관없이 함수를 실행할 수 있다. 장점 시작과 끝을 명확하게 구분할 수 있다. 같은 기능이 필요할 때마다 해당 함수를 실행할 수 있다. 함수 선언 : 함수가 어떤 명령을 처리해야 하는지 미리 알려주는 것. 함수 실행 : 선언한 함수를 가져와 사용하는 것. 여러 번 사용할 수 있는 함수 함수의 '재사용성' : 입력을 바꿔 여러 번 사용할 수 있는 함수의 성질. 매개변수(parameter) : 함수를 정의할 때 사용되는 변수. 인수(argument) : 함수가 호출될 때 매개변수에 실제로 담기는 값. function 함수이름..

제어문 조건을 구분하여 프로그램에서 소스 실행 순서를 결정하는 명령문. if문 소괄호 안의 조건이 true이면 중괄호 안의 코드 소스를 실행한다. if(조건식){ true일 때 실행할 코드 } if(true){ document.write("if문"); } if~else문 소괄호 안의 조건이 true이면 if 중괄호 안의 코드를 실행하고 false이면 else 중괄호 안의 코드를 실행한다. if(조건식){ true일 때 실행할 코드} else{ false일 때 실행할 코드} var num = prompt("5 이상의 숫자 입력"); if (num < 5) { alert("5 미만의 수를 입력했습니다. 입력한 수: " + num); } else { document.write("입력한 수: " + num); ..

사칙 연산자 + : 더하기 - : 빼기 * : 곱하기 / : 나누기 나누기 연산자 % : 앞의 값을 뒤의 값으로 나눈 나머지 값을 구한다. 증감 연산자 ++ : 변숫값을 1만큼 증가시킨다. -- : 변숫값을 1만큼 감소시킨다. 연산자와 피연산자 현재 연도 - 나이 + 1 에서 현재 연도, 나이, 1은 피연산자이고 -, +는 연산자이다. 증감 연산자 이해하기 var num1 = 1; var num2 = num1++ +5; // --> num1=2, num2=6 var num3 = num2--; // --> num2=5, num3=6 var num4 = --num3; // --> num3=5, num4=5 증감 연산자가 뒤에 있을 때 : 전체 수식의 처리가 끝난 후 적용된다. 증감 연산자가 앞에 있을 때 :..