본문 바로가기

자바스크립트6

[Javascript] Javascript 입문 10 (170321) Javascript 입문 10 Dynamic Dom- 원하는 시점에 동적인 객체를 만들어 넣어야 할 때 DynamicDom을 이용한다.- DOM : Document Object Model createElement 이용하여 동적으로 객체 추가하기1. document.createElement("객체명"); 을 이용하여 참조값을 담는다.2. 만들어진 문서객체에 텍스트를 출력한다. (innerText 이용)3. 객체를 넣을 body의 참조값을 담는다.4. append함수를 이용하여 만들어진 div를 추가한다.- append : 객체를 자식요소로 맨 뒤에 추가한다.- prepend : 객체를 자식요소로 맨 앞에 추가한다. 동적 객체 추가 + 속성 추가하기- setAttribute(속성명, 속성값) 사용 응용1 :.. 2017. 3. 21.
[Javascript] Javascript 입문 07 (170316) Javascript 입문 07 Global 영역 변수 선언의 문제점- global 영역에 변수를 선언하면 자바스크립트로 조작하여 이용가능- 변수가 중복될 수 있다.- 협업하기 쉽지 않다. function 생성 시 onclick 기능보다 addEventListener를 많이 사용하는 이유- onclick 이용 시 함수를 global 영역에 만들 수 밖에 없다. 이럴 경우 앞서 언급한 문제점이 나타난다.- addEventListener를 이용할 경우 addEventListener("click", function(){ }); 에서 function안에 입력하기 때문에 변수를 선언하면 function 외부에서는 참조가 불가능하다. QUIZ > 버튼을 누르면 누른 횟수가 count되도록 해보세요. ANSWER > .. 2017. 3. 16.
[Javascript] Javascript 입문 06 (170316) Javascript 입문 06 Object 타입과 Array 타입의 요소 삭제- object: delete 이용하여 삭제- Array: splice 이용하여 삭제nums.splice(1,2); ----> 삭제하는법 : 1번부터 2개 data삭제 ----> index가 변한다 ----> 데이터 삭제 후 index변화때문에 생기는 문제를막기 위해 뒤부터 검사하기도 한다. QUIZ > 첫번째 input 상자에서 버튼을 누르면 두 번째 input 상자로 입력한 text가 이동하도록 만들어보세요. ** 출력 결과 ** Operator- 연산자란? 하나 이상의 값(또는, 프로그래밍 은어로 표현)을 받아서 다른 값을 산출합니다 - 연산자의 종류 산술연산자 논리연산자 대입연산자 비교연산자 증감연산자 1. 산술연산자- .. 2017. 3. 16.
[Javascript]Javascript 입문 05 (170315) Javascript 입문 05 Stack과 Heap- Stack : 변수가 저장되는 공간- Heap : 객체가 저장되는 공간: obj를 선언하는 순간 heap공간에는 { } 객체가 생성되고 stack공간에는 heap의 999라는 주소값(=참조값=reference값)을 갖고 있는 obj 변수를 저장한다. -한 번 더 복습! : var a = { }를 생성할 때 { } 객체는 heap에 생성된다. 이 객체는 19라는 주소값(=참조값=reference값)을 갖고있는데 stack에 a라는 변수를 저장하며 그 변수에 주소값 19를 저장한다. stack과 heap 코드에 적용하기 1. var num1 은 stack에 10 객체는 heap에 객체에 대한 주소값(=키값)은 num1변수에 저장된다. 2. var num1.. 2017. 3. 15.