이번에는 java script 를 이용해서 태그를 만들고, 추가하는 방법과 삭제하는 법에 대해서 알아 봅시다. 태그의 추가 태그를 추가하는 것은 노드의 추가 라고도 하는데요, 태그를 만들고, 해당 태그의 자식 요소를 연결한 후 본문에 있는 특정 공간(태그) 에 붙여 줄 겁니다. 즉. 아래의 inner1 이라는 div 가 있을 때, inner1 이라는 버튼을 누르면 비어있는 안쪽 공간에 노드를 추가할 겁니다 먼저 해당 버튼을 가지고 와서, click 을 했을 때 이벤트를 만들어 줍니다. 그리고, inner1 의 태그 div 를 가지고 와서, 해당 안쪽 .innerHTML 에 아래처럼 작성을 해줍니다. html 파일을 브라우저 창으로 키고 F12 를 누른 후 버튼을 누르면 아래처럼 없던 태그 및 텍스트가 생..

이번에는 java script를 이용해서 동적 기능을 하는 메뉴를 만들어 봅시다 위 처럼, 버튼을 가지고 있고 웹 에서 실행했을 때 메뉴가 열려 있는 상태로 실행이 되고, 버튼을 한번 더 누르면 메뉴가 닫히도록 만들 었고, 모바일 환경에서 할 경우에 반대로, 버튼이 있고, 한번 더 누르면 메뉴가 열리도록 구현을 했습니다 메뉴의 배경색이나 글씨색, padding 등이 필요하기 때문에 css 를 간단하게 만들었습니다. * {margin: 0; padding: 0; list-style: none;} .sidenav { position:fixed; left: 0; top: 50px; width: 200px; height: 100%; background-color: #263238; z-index: 30; padd..

이번에는 java script의 DOM 에 대해서 알아 봅시다 DOM DOM 은 Document Object Model 라고 하는데, 문서 객체 모델 이라고 하는, Document 객체를 의미 합니다. DOM 은 Element(요소) 들의 선택, 삭제, 생성, 수정 등을 위해서 사용하는 것 입니다. Document 에는 위와 같이 특정 태그 및 요소들을 선택하는 방법이 있습니다., ※ 빨간색은 자주 사용하는 것 위와 같은 코드가 있을 때, 특정 태그를 가져오는 방법으로 id를 사용해서 가져왔었죠? 해당 방법은, id 가 btn1 인 태그를 가져오는 방법 입니다. 이 태그를 가져와서, onclcik 이벤트를 걸어 줍니다. 그리고 위에 있는 input 태그 type="checkbox" 를 전부 가져올 건데요..

이번에는 java script 의 이벤트에 대해서 알아 봅시다. 이벤트 이벤트는 어떠한 동작을 의미 합니다. 예를 들면, 마우스 클릭 같은 것. 이벤트의 종류 이벤트의 종류에는 여러가지가 있지만, 중요한 몇가지와, 사용하는 것만 알고 있으면 됩니다. 보통, click , load , keyup 정도를 많이 사용한다고 해요. 이벤트를 사용할 때는 앞에 on 을 붙여서 사용해주면 됩니다. ex) onclick ※ 이를 이벤트 핸들러 라고 합니다. 이벤트의 모델 이벤트의 모델에는 인라인 모델, 기본 모델, 표준 모델이 있습니다. 인라인 모델 인라인은 태그안에 직접 이벤트를 명시해서 사용하는 방법 입니다. 이렇게, 태그 안에 onclick 을 했을 경우 어떤 함수가 동작을 하도록 해주고, 안에서 함수를 정의 하..

이번에는 java script의 객체와 JSON 함수를 알아 봅시다 객체 java script 에서 객체는 {} 를 사용해서 정의 및 선언 합니다. 객체의 멤버변수는 "키 : 값" 을 가집니다. 접근방법 해당 객체에 접근하고 싶을 때, 객체이름.멤버변수명 을 이용해서 접근합니다. person의 arr은 배열이기 때문에, [index] 를 통해서 한번 더 접근할 수 있습니다. 객체이름["멤버변수명] 을 이용해서 접근하는 방법도 있습니다. 객체가 이중으로 담겨 있는 경우 예제 아래의 list 객체를 중첩for 문을 이용해서 접근하기 함수를 가지고 있는 객체 및 사용 함수를 이용한 객체 선언 함수를 이용해서 객체를 선언할 때는, 함수 내에 this. 를 이용해서 선언을 합니다. this. 를 사용해서 변수를 ..

이번에는 java script 의 클로저 에 대해서 알아 봅시다. 클로저 var 변수는 함수단위 스코프를 가지고 있기 때문에, 함수 내에서 선언 및 초기화 된 변수는 함수 바깥에서 사용하지 못한다고 했습니다. 그렇기 때문에, 함수 바깥에서 함수 안에 선언된 var a 를 사용하지 못하는데, 이러한 a 를 사용할 수 있도록 해주는 것이 클로저 입니다. 클로저는, 함수 내에 또 함수를 만들어서 a에 접근하는 것을 의미 합니다. ※ java script의 함수는 실행환경의 상태를 기억 합니다. 내부 익명 함수가 외부함수 method()의 값을 바꿀수 있는(접근할 수 있는) 키를 가지고 있습니다. 외부함수 밖에서 내부함수가 호출되더라도 외부함수에 있는 지역변수 a에 접근가능한데, 이런 반환함수를 클로저라고 합니..