JQuery를 사용하려면 JQueryCDN으로 소스를 가져와야 한다.

[아래 포스팅 참고]

https://shinye-developmentdiary.tistory.com/8

 

제이쿼리(JQuery)를 사용하는 이유와 사용법

제이쿼리(JQuery)란 오픈소스 기반의 자바스크립트 라이브러리를 의미한다. 라이브러리는 SW의 구성요소 중 한 가지로 API를 바탕으로 대상 환경(플랫폼)에서 바로 실행될 수 있도록 모듈화 된 프

shinye-developmentdiary.tistory.com

 HTML <Body> 태그 영역 

<body>
    <div>
            <h3>[주소입력]</h3>
            <form name="frm">
                <table>
                    <tr>
                        <td width=100 class="title">이름</td>
                        <td width=400><input type="text" name="name"></td>
                    </tr>
                    <tr>
                        <td width=100 class="title">주소</td>
                        <td width=400><input type="text" name="address" size=50></td>
                    </tr> 
                </table>
                <div style="margin-top:20px">               
                    <input type="submit" value="추가">
                    <input type="reset" value="취소">
                </div>
            </form>
            
        </div>
        <div>
            <h3>[주소목록]</h3>
            <table id="list"></table>
        </div>
</body>

 

 CSS (html - head의 <style>태그 안) 
h3{
    color: rgb(6, 64, 172);
}

table{
    border-collapse:collapse ;
}

td{
    border: solid 2px rgb(20, 117, 243);
    padding: 10px;
}

.title{
    text-align: center;
    background-color: rgb(255, 245, 233);
    color: rgb(20, 117, 243);
    font-weight: bold;
}
.row:hover{
    background-color: rgb(255, 252, 214);
}

 

 JavaScript (JQuery) - html의 <script> 태그 안 

var persons = [
    {name:'홍길동',address:'인천 서구 경서동'},
    {name:'심청이',address:'인천 미추홀구 학익동'},
    {name:'둘리',address:'인천 부평구 청천동'}
];

1. 샘플 데이터를 persons 배열 변수에 담아준다.

 

- 배열은 [ ] 대괄호 안에 데이터를 작성하며 객체는 { } 중괄호 안에 작성한다

- 객체의 데이터는 { 키:키값 }으로 입력, 하나의 중괄호가 하나의 객체이다.

	list();
        function list(){
            var str="";
            str+= '<tr class="title">';
            str+= '<td width=50>번호</td>';
            str+= '<td width=100>이름</td>';
            str+= '<td width=300>주소</td>';
            str+='</tr>';
            
            for(var i=0;i<persons.length;i++){
                var person = persons[i];
                str+= '<tr class="row">';
                str+= '<td>'+(i+1)+'</td>';
                str+= '<td>'+person.name +'</td>';
                str+= '<td>'+person.address + '<button class=del index='+i+'>삭제</button></td>';
                str+= '</tr>';
            }

            $("#list").html(str);
        }

▶ 2. 목록 출력하는 함수 list( ) 생성

 

* list()는 배열 데이터를 작성한 후에 실행시켜야 한다. (배열 위에 작성하면 데이터가 없어서 오류)

1) str 변수에 초기값으로 " "를 설정한 다음 html의 table(id가 list)에 삽입할 내용을 따옴표 안에 작성해 준다

- 작성한 줄이 길기 때문에 str을 여러 개로 나누어서 작성.

- tr은 테이블 행, td는 데이터가 들어가는 공간(열)이다.

2) 처음 str은 제목행

3) for문을 사용해서 만들어둔 배열 데이터를 출력한다.

- 배열의 인덱스(0번)부터 persons배열의 length 미만까지 (인덱스 0번부터 시작해서 length-1까지 존재한다) i를 증가

- <tr> 안에 3개의 <td>를 넣는다 (인덱스, 이름, 주소)

** 배열 객체의 속성은 배열명.속성명 으로 사용한다.

4) id를 list로 설정해 둔 table에 작성한 str을 넣어 목록을 출력한다.

 str += '<td>'+person.address + '<button class=del index=' + i + '> 삭제 </button></td>';

5) 주소 데이터 옆에 삭제 버튼을 만든다 -> 아래 4번의 삭제 함수 설명 참조

- class는 del로 지정하며 index 속성을 부여해 반복해서 1씩 증가하는 값 i를 넣어준다.

$(frm).on('submit',function(e){          
           e.preventDefault();          

           if(!confirm('추가하실래요?'))return; 
           var name1 = $(frm.name).val();
           var address1 = $(frm.address).val();
           
           if( name1=="" || address1=="")return; 
           var person = {name: name1, address:address1};
           persons.push(person);
           
           list();
           $(frm.name).val("");
           $(frm.address).val("");
           $(frm.name).focus();
        });

▶ 3. 테이블에 입력한 데이터 추가하는 함수 생성

 

1) name을 frm으로 설정해 둔 폼을 선택해서 'submit'했을 때 함수를 실행한다.

- 이벤트를 적용할 때는 객체에. on을 붙여주며 ('이벤트명',function(){ });으로 작성한다.

2) 엔터값을 매개변수 e로 받아 추가 버튼을 눌렀을 때 바로 실행되지 않도록 하기 위해

e.preventDefault( ); 를 작성해 준다

3) confirm() 메서드를 사용해 저장 여부를 사용자가 결정한다. 취소 시 return으로 submit을 빠져나옴.

confrim("알림창에 보여질 텍스트")

4) input의 name과 address텍스트 박스에 작성한 데이터는. val( ) 메서드로 가져와 변수 name1, address1에 각각 담아준다.

※ form의 name은 별다른 선택자 없이 $(폼이름)으로 사용한다.
※ form에 들어간 input의 name은 폼이름. 인풋이름으로 사용한다 -> 그냥 사용하려면 class나 id를 주면 된다.

5) 입력한 값이 하나라도 없을 경우(if문으로 비교) return으로 submit을 빠져나온다

6) 입력한 값이 있을 경우 하나의 객체 person에 각각의 name과 address에 데이터를 넣어준다

7) 값이 입력된 객체는. push( ) 메서드를 이용하여 person 배열에 추가

※ push( ) 메서드는 데이터를 추가해 주는 함수이다.

8) 데이터를 추가한 후 목록을 출력하기 위해 list( ) 함수 실행한다.

9) 값이 추가된 다음에는 입력창을 초기화해주기 위해 각각의 속성에. val( ) 메서드로 " " 공백을 넣어준다.

10). focus( ) 메서드로 작업이 끝나면 name칸에 커서를 이동

$('#list').on('click','.del',function(){
        var index = $(this).attr("index");
        var person = persons[index];
        if(!confirm(person.name+"데이터 를(을) 삭제하실래요?"))return;
        persons.splice(index,1);
        list();
});

▶ 4. 테이블의 데이터 삭제하는 함수 생성

 

1) id가 list인 form 안에 존재하는 삭제버튼(class가 del)을 클릭했을 때 함수 실행

2) index 변수에다 선택한 버튼의 해당 인덱스 속성값을. attr() 메서드를 이용해 담아준다.

※ attr("속성") : 해당 속성값을 가져오는 메서드
※ $(this) : 선택한 객체를 this로 받아 선택자로 사용한다.

3) confirm() 메서드를 사용해 데이터 삭제 여부를 사용자에게 물어본다. 취소 시 return으로 작업 중단.

4) 확인을 눌렀을 경우 splice() 메서드를 이용해 persons배열의 해당 인덱스 데이터 하나를 삭제한다.

※ splice("시작번호", 삭제할 데이터 개수)는 배열의 특정 범위를 삭제하거나 추가 또는 대체할 수 있는 함수이다.

- 버튼에 부여한 index 속성에는 for문을 통해 0~배열의 마지막 인덱스 번까지 반복 증가된 i가 들어간다.

- index 속성을 통해 해당 배열의 데이터 위치를 참조한다.

5) 삭제 후 만들어둔 list( ) 함수로 목록 출력

'FE > javascript(jQuery)' 카테고리의 다른 글

JQuery의 $.Ajax메소드 사용법 및 Json데이터  (0) 2023.02.08
jQuery 핸들바(handlebars) 라이브러리 사용법  (0) 2023.02.08
JavaScript Bingo game source code - 자바스크립트 빙고게임 코드  (0) 2022.12.31
JavaScript Bingo game - 자바스크립트로 만든 빙고 게임 (색칠하기)  (0) 2022.12.31
JavaScript ping pong game source code 자바스크립트 핑퐁게임 코드  (2) 2022.12.31

티스토리툴바