공부하는 비오

위 화면과 같이 To Do List를 만들어보자. (css는 이 포스트에서 다루지 않고 기능적인부분(javascript)만 정리.) [ 기능 ] 빈 칸에 내용을 작성하고 '추가'를 누르면, 그 내용을 아래쪽 표에 추가. 체크 한 후 '선택삭제'를 누르면, 체크한 항목만 삭제. '마지막 항목 삭제'를 누르면, 마지막 항목 삭제. '전체 삭제'를 누르면, 리스트 전체 삭제. colgroup을 사용하여, 각 column의 너비를 설정. document .getElementById('btnAdd') .addEventListener('click',addList); #btnAdd를 눌렀을 때, addList함수를 실행함. function addList( ) contents == .text-basic 선택 if(co..

JavaScript 2020. 7. 22. 11:45

새로운 요소 추가하기 createElement( ) ex. document.createElement('p'); 텍스트 추가하기 createTextNode( ) ex. document.createTextNode('Hello'); 선택한 요소에 자식요소 추가하기 appendChild( ) ex. document.body.appendChild(자식요소); ex. div요소를 만들고, 텍스트노드 3을 만든 후, div의 하위요소를 3을 넣음. 그 후, #wrap의 하위요소로 div 넣음. textNode대신 innerHTML을 사용할 수 있음. **innerHTML == 하위요소의 html을 변경할 때 사용. 둘다 같은결과.

JavaScript 2020. 7. 22. 10:27

자식요소 모두 가져오기 .children id가 listBody인 요소의 자식요소를 다 가져옴. 부모요소 가져오기 .parentElement .parentNode listChild[2]의 부모요소 가져오기. 부모요소에 포함된 모든 하위요소를 가져옴.

JavaScript 2020. 7. 21. 12:42

$.ajax( ) :데이터를 서버에 HTTP PSt, GET방식으로 전송할 수 있으며, HTML, XML, JSOn, 텍스트 유형에 데이터를 요청할 수 있는 통합적인 메서드. $.post( ), $.get( ), $.getJSON( ) 메서드의 기능을 하나로 합쳐 놓은 것. $.ajax({ url: 'url 주소'. type: '전송 방식(get, post)', data: '전송할 데이터', dataType: '요청한 데이터 형식(html, xml, json, text, jsonp)', success: function( ) { 콜백함수 } }); **콜백함수 : 일정 조건이 충족되면 실행되는 함수 Ajax로 JSON 데이터 바인딩하기 mockaroo.com 에서 가상의 데이터베이스 생성 가능. $.aja..

jQuery/Ajax 2020. 7. 8. 10:04

load( ) 메서드 : 외부 콘텐츠를 가져옴. $(요소선택).load(url, data, 함수); ex.

jQuery/Ajax 2020. 7. 7. 10:10

Ajax (Asynchronous JavaScript and XML) : 클라이언트가 비동기 방식으로 자바스크립트를 이용하여 화면 전환없이 서버 측에 자료(XML, HTML, JSON, text 등등)를 요청할 때 사용. Ajax 를 생각할 때, 덧글창을 생각하면 쉬움. html 파일의 일부를 바꾸기 위해서는 페이지 전체를 새로고침해야하지만, 나머지 부분은 다 그래도인데, 한 부분(덧글창)만 바꾸기 위해 전체를 새로고침하는건 낭비가 되니까, 그 부분만 새로고침 할 수 있도록 만든 것이 Ajax! 그 영역만 Ajax로 전체페이지와 비동기화되어 개별적으로 움직임. Ajax를 사용하기 위해, 내 컴퓨터에 웹 서버를 설치해야 함. 오토셋(autoset.net/)을 사용하여 내 컴퓨터를 아파치서버로 만들어 줄 수..

jQuery/Ajax 2020. 7. 6. 11:14

Button value == 버튼 위에 표시되는 문자. onclick == 클릭했을 때 실행되는 함수. text 박스의 value값 활용하기 value == text 박스에 표시되는 글자. id 값을 준 후, script에서 getElementByID(' ').value 를 사용하여, value 값을 가져올 수 있음. ex. Radio 의 value값 활용하기 둥근버튼 name == radio의 gruop 이름, name이 같은 버튼 중 하나를 선택 할 수 있음. value == 각 radio 버튼의 value 값. getElementsByName(' ').value 를 사용하여, 같은 name을 가지는 value값들을 불러올 수 있음. ex. JavaScript 버튼을 선택한 후, 답안지제출을 누른다면..

JavaScript 2020. 7. 3. 11:08

배열의 경우 for문을 사용할 때 좀더 편리하게 사용할 수 있다. -사용방법 for( i in arr ) { 코드 }; >> arr에 있는 index 수만큼 순차적으로 실행됨. 일반적인 for문과 달리 i 시작값, 끝값, i++를 지정해줄 필요가 없음. /ex var arr = [10, 20, 30]; //일반적인 for 문 for(var i = 0; i

JavaScript 2020. 6. 18. 14:36