정답부터 말하자면 다중 파일 다운로드 구현 시

 

각 파일 input의 name은 달라도 되고 같아도 된다.

 

 

 

다만 차이점은 다르게 쓰는 경우 그 변수를 받아내기 위해서 Map을 써야 한다는 점이다.

 

파일의 count를 나타내는 key값과 해당 파일 object를 value로 받아 활용한다.

 

 

일단 처리 속도는 차치하고

 

로직 부분에서만 봤을 땐 불필요하게 정보를 많이 구분하는 것처럼 보이지만

 

코딩테스트 등에서 Map의 처리 속도가 빠른 것으로 보아 구현 시 트래픽은 어떻게 될지 모르겠다.

 

 

 

파일이름을 같게 쓰는 경우 multipart의 배열로 받아 파일의 object만 넣어준다.

 

for (a : b)문으로 하나씩 꺼내 각각을 insert 찍어주는 식

 

 

 

신경쓸 점은 보통 파일 다운로드 페이지는 해당 게시글이나 페이지에 종속돼있기 때문에

 

DB table상에서 나눠주는 경우 참조키 문제를 잘 고려해야 한다는 정도

 

 

 

 

 

 

'Web 관련' 카테고리의 다른 글

Javascript+jQuery+Ajax 12일차  (0) 2019.02.13
Javascript+jQuery+Ajax 11일차  (0) 2019.02.12
Javascript+jQuery+Ajax 10일차  (0) 2019.02.08
Javascript+jQuery+Ajax 9일차  (0) 2019.02.08
Javascript에 관한 MVC 구조의 이해  (0) 2019.02.07

입력 요소 값 가져오기


값 설정하기


$("셀렉터").val("내용");


값 읽어오기


text, select(드롭다운)


var input = $("셀렉터").val();


드롭다운요소의 경우 사용하지 않는 <option> 태그라 하더라도 value 속성값을 부여해야 한다.


1
2
3
4
<select name='foo'>
    <option value="">--- 선택하세요 ---</option>
    <option value="bar">item 1</option>
</select>




라디오 버튼의 경우

- 셀렉터가 여러 개를 의미하는 경우이므로 그 중에서 선택된 항목만 지정하는 셀렉터를 사용해야 한다.

- 라디오는 하나만 선택 가능하므로 가져온 결과 자체는 단일 값이다.


1
var input = $("셀렉터:checked").val();



체크박스의 경우


- checked 가상 클래스를 통해 가져온 대상이 배열 상태가 되므로 이를 반복문으로 처리해야 한다.

- 배열의 요소는 선택된 체크박스들에 대한 HTML태그가 된다.

- 그러므로 각 HTML 태그를 다시 jQuery 객체로 변환하여 사용해야 한다.


1
var input = $("셀렉터:checked");



1
2
3
4
5
6
7
8
9
for (var i=0; i<input.length; i++) {
 
    // 배열에 포함된 원소(HTML태그)를 jQuery객체로 변환
 
    var tmp = $(input[i]);
 
    ...
 
}



포커스 강제 지정


1
$("셀렉터").focus();




입력 요소 제어


$.each() 함수


- 배열을 탐색하는 jQuery 기능


1
2
3
4
5
6
7
8
9
10
11
12
13
var data = ['hello''world'];
 
 
 
// 배열을 탐색하면서 원소의 수만큼 콜백함수가 호출된다.
 
$.each(data, function(index, item) {
 
    // index는 순차적으로 0, 1
 
    // item은 순차적으로 'hello', 'world'
 
});



- 배열의 원소가 HTML 객체인 경우 jQuery로 변환하여 사용해야 한다.

  ex) 체크박스


1
2
3
4
5
6
7
8
9
10
var data = ['<input type="checkbox" />''<input type="checkbox" />'];
 
 
// 배열을 탐색하면서 원소의 수 만큼 콜백함수가 호출된다.
 
$.each(data, function(index, item) {
 
    // $(item) 형태로 객체를 생성하여 처리 가능
 
});




원래의 목적은 객체를 탐색하는 기능


1
2
3
4
5
6
7
8
var data = { name'hello', userid: 'world', age: 20};
 
 
$.each(data, function(index, item) {
 
console.log(index + " >> " + item);
 
});



JSON 객체를 넣으면 인덱스로 key, 아이템으로 value를 리턴해준다.



입력요소 관련 submit 이외의 이벤트


포커스가 들어온 경우


1
2
3
4
5
$("셀렉터").focus(function([e]) {
 
    ...
 
});



포커스가 빠져나간 경우


1
2
3
4
5
$("셀렉터").blur(function([e]) {
 
    ...
 
});




상태가 변경된 경우


change 이벤트는 주로 라디오, 체크박스, 드롭다운에 대하여 활용도가 높다.


1
2
3
4
5
$("셀렉터").change(function( [e] ) {
 
    ...
 
});



텍스트를 입력하는 요소일 경우


내용이 변경되고 포커스가 빠져나올 때 이벤트가 발생한다.


체크박스나 라디오 버튼의 경우


선택 상태가 변경된 즉시 발생한다.


드롭다운의 경우


선택 상태가 변경된 즉시 발생한다.


프로퍼티 설정


- HTML 태그에서 값을 갖지 않는 속성 : property

- 값을 갖는 속성 : attribute


프로퍼티의 적용 여부 조회


특정 프로퍼티의 적용여부를 boolean 값으로 조회한다.


checked, disabled, selected



1
var is = $("셀렉터").prop('프로퍼티 이름');



ex) 체크박스의 disabled 속성이 적용되어 있는지 여부 확인


1
<input type="checkbox" class='foo' disabled />



1
2
3
// 속성이 적용되어 있으므로 true
 
var ok = $(".foo").prop('disabled');



프로퍼티의 설정/해제


prop 함수에 두 번째 파라미터로 boolean 값을 전달하면 프로퍼티를 강제로 설정하거나 해제할 수 있다.


1
$(".foo").prop('disabled'true|false);




정규표현식


- 문자열의 형식을 검사하기 위한 정형화된 식

- 모든 프로그래밍 언어에서 공통적으로 사용한다.


Javascript에서 정규표현식 사용


1
2
3
4
5
6
7
var regex = /정규표현식/;
 
if ( !regex.test("검사할문자열")) {
 
    // ... 정규표현식에 부합하지 않을 경우의 처리
 
}




주요 정규표현식


숫자 모양에 대한 형식 검사

/^[0-9]*$/



영문으로만 구성되었는지에 대한 형식 검사

1
/^[a-zA-Z]*$/



  

한글로만 구성되었는지에 대한 형식 검사

1
/^[ㄱ-ㅎ가-힣]*$/



  

영문과 숫자로만 구성되었는지에 대한 형식 검사

1
/^[a-zA-Z0-9]*$/



  

한글과 숫자로만 구성되었는지에 대한 형식 검사

1
/^[ㄱ-ㅎ가-힣0-9]*$/



  

이메일 형식인지에 대한 검사. 아이디@도메인의 형식을 충족해야 한다.

1
/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i



  

'-'없이 핸드폰번호인지에 대한 형식검사.

1
/^01(?:0|1|[6-9])(?:\d{3}|\d{4})\d{4}$/



  

'-'없이 전화번호인지에 대한 형식검사. 각 부분에 대한 자리수도 충족시켜야 한다.

1
/^\d{2,3}\d{3,4}\d{4}$/



  

'-'없이 주민번호에 대한 글자수 및 뒷자리 첫글자가 1~4의 범위에 있는지에 대한 검사

1
/^\d{6}[1-4]\d{6}/




'Web 관련' 카테고리의 다른 글

다중 파일 다운로드 input의 name태그  (0) 2019.06.28
Javascript+jQuery+Ajax 11일차  (0) 2019.02.12
Javascript+jQuery+Ajax 10일차  (0) 2019.02.08
Javascript+jQuery+Ajax 9일차  (0) 2019.02.08
Javascript에 관한 MVC 구조의 이해  (0) 2019.02.07

요소의 탐색


메서드 체인


- 하나의 jQuery요소에 대하여 메서드를 연속적으로 호출하는 기법.

- 특별한 경우가 아닌 이상 jQuery()의 함수들은 객체 자신을 리턴한다.


1
2
3
4
5
6
7
$("#foo").attr(key, value)
 
        .css(key, value)
 
        .addClass(cls)
 
        .click(function() {});




주변요소 탐색하기


 함수

설명 

 prev() 

 이전 요소를 리턴한다. 

 next()

 다음 요소를 리턴한다. 

 parent()

 상위 요소를 리턴한다. 

 children()

 하위 요소(들)을 리턴한다. 

 eq(n)

 n번째 요소를 리턴한다. 


부모 요소 얻기


주어진 셀렉터를 갖는 가장 인접한 부모 요소를 리턴한다.


1
$("#foo").parents("셀렉터");


자식 요소 얻기


주어진 셀렉터를 갖는 가장 인접한 자식 요소를 리턴한다.


1
$("#foo").find("셀렉터");




요소의 동적 생성


<body>태그 안에 명시된 태그 요소를 객체화 하는 경우


태그 이름을 $() 함수에 전달한다.


1
var obj = $("div");


<body> 태그 안에 명시되지 않은 태그 요소를 객체화 하는 경우


태그 이름을 <>로 감싸서 $() 함수에 전달한다.


1
var obj = $("<div>");



이렇게 생성된 요소들은 jQuery의 기능들을 적용할 수 있다.


1
2
3
var obj = $("<div>");
 
obj.attr('id''hello').css(...).addClass('item');



기존에 존재하는 요소를 복사하는 경우


1
2
3
var obj = $('#foo').clone();
 
obj.attr('id''helloworld');



모든 속성을 동일하게 복사하므로 id속성값은 다른 값으로 변경해주어야 한다.


동적으로 생성된 요소를 HTML 문서에 삽입하기


함수 

설명 

 A.html(B)

 A의 시작태그와 끝태그 사이의 내용을 B로 대체한다.

 A.append(B)

 A에 B를 추가한다. 기존의 내용을 유지하면서 맨 뒤에 추가한다. 

 B.appendTo(A)

 B를 A에 추가한다. 기존의 내용을 유지하면서 맨 뒤에 추가한다.

 A.prepend(B)

 A에 B를 추가한다. 기존의 내용을 유지하면서 맨 앞에 추가한다. 

 B.prependTo(A)

 B를 A에 추가한다. 기존의 내용을 유지하면서 맨 앞에 추가한다.

 A.insertBefore(B)

 A를 B의 직전에 삽입한다. 

 A.insertAfter(B) 

 A를 B의 직후에 삽입한다. 

 A.empty()

 A의 모든 내용을 비운다. 


동적으로 생성된 요소에 대한 이벤트 적용


기존의 이벤트 처리는 생성한 객체에 적용한다는 개념이지만,

동적 요소에 대한 이벤트 처리는 앞으로 생성될 객체에 적용할 이벤트를 미리 준비해 둔다는 개념이다.


1
2
3
4
$(document).on('click''#hello'function() {
            e.preventDefault();
            ...
        });



* 주의 : 동적 생성 요소가 <form>인 경우에는 e객체를 사용해서는 안 된다.



HTML 요소의 위치 변경


append(), prepend(), insertBefore(), insertAfter() 함수 등을 동적 요소가 아닌

기존에 존재하는 HTML 요소끼리 사용하면 서로 위치를 바꿀 수 있다.


1
2
3
4
5
6
<div id="foo"></div>
<div id="bar"></div>
<script>
    // #foo의 위치가 #bar 다음으로 이동하게 된다.
    $("#foo").insertAfter("#bar");
</script>



'Web 관련' 카테고리의 다른 글

다중 파일 다운로드 input의 name태그  (0) 2019.06.28
Javascript+jQuery+Ajax 12일차  (0) 2019.02.13
Javascript+jQuery+Ajax 10일차  (0) 2019.02.08
Javascript+jQuery+Ajax 9일차  (0) 2019.02.08
Javascript에 관한 MVC 구조의 이해  (0) 2019.02.07

요소의 판별


index() 함수


특정 요소가 부모 태그 안에서 갖는 인덱스번호를 리턴하는 함수 (0부터 시작함)


1
2
3
4
5
6
7
8
9
10
<div>
    <a href="#">...</a>
    <div id="hello"></div>
    <p class="memo"></p>
</div>
 
<script>
    // 부모 <div>를 기준으로 2번째 요소이므로 인덱스 1이 리턴된다.
    var idx = $("#hello").index();
</script>


$(this)


복수 요소에 대한 이벤트에 전달된 콜백함수 안에서 이벤트가 발생한 주체를 의미하는 객체


1
2
3
4
5
6
7
8
9
10
11
<button class="btn">button1</button>
<button class="btn">button1</button>
<button class="btn">button1</button>
 
<script>
    // 'btn'이라는 클래스를 갖는 모든 요소에 대해서 일괄적으로 적용되는 이벤트
    $('.btn').click(function() {
        // 버튼은 한번에 하나씩만 누를 수 있다.
        // 이 안에서 $(this)는 클릭된 주체를 의미한다.
    });
</script>


html 요소의 속성 제어


특정 요소에 적용되어 있는 속성값 조회하기


1
var foo = $("#bar").attr('속성이름');


특정 요소의 적용


개별적용


1
$("#bar").attr('속성이름', 값);


일괄적용(json형태 사용)


1
2
3
4
5
6
$("#bar").attr({
            속성이름: '값',
            속성이름: '값',
            속성이름: '값',
            ...
        });


- 속성이름에 공백이나 - 기호가 포함된 경우는 반드시 따옴표 적용

- 그 외에는 따옴표 처리가 필수는 아님


data-* 속성


data-000 형태로 개발자가 필요에 따라 직접 정의하는 속성

JAVASCRIPT에서 사용할 변수값을 숨겨놓기 위한 목적으로 사용한다.


1
2
3
<div id="foo" data-hello="안녕하세요" data-world="jQuery">
    ...
</div>


data 속성값 조회하기


1
var foo = $("#bar").data('hello');


data 속성값 적용/변경하기


1
$("#bar").data('hello''반갑습니다');



HTML 요소의 CSS 속성 제어


특정 요소에 적용되어 있는 속성값 조회하기


1
var foo = $("#bar").css('속성이름');
cs


특정 요소의 적용하기


개별적용


1
$("#bar").css('속성이름''값');
cs


일괄적용(json형태 사용)

1
2
3
4
5
6
$("#bar").css({
    속성이름 : '값',
    속성이름 : '값',
    속성이름 : '값'
    ...
  });
cs


* CSS 속성이름에 "-"가 있을 경우 속성이름을 반드시 따옴표 처리해야 함(변수이름에 "-"가 있으면 문법에러로 간주하기 때문)


HTML 요소의 CSS 클래스 제어

CSS 클래스 적용여부 검사


1
var foo = $("#bar").hasClass('클래스이름');      // true, false 리턴
cs


CSS 클래스 적용


1
$("#bar").address('클래스이름 클래스이름...');
cs


두 개 이상의 클래스를 적용하고자 하는 경우 공백으로 구분


CSS 클래스 삭제


1
$("#bar").removeClass('클래스이름 클래스이름...');
cs


두 개 이상의 클래스를 삭제하고자 하는 경우 공백으로 구분




CSS 클래스 적용/삭제 자동 반복


1
$("#bar").toggleClass('클래스이름 클래스이름...');
cs


두 개 이상의 클래스를 처리하고자 하는 경우 공백으로 구분

(toggle 자체가 on/off 하는 기능을 반복하는 것을 의미함)



not()


복수 요소를 지정하고 있는 jQuery객체 중에서 특정 요소를 제외한 항목들을 지정하는 기능


this와 함께 사용하는 경우


1
2
3
4
5
6
7
8
9
10
11
$(".btn").click(function() {
 
    // ".btn"중에서 클릭된 요소.
 
    $(this)
 
    // '.btn'중에서 클릭되지 않은 나머지 요소(들)
 
    $(".btn").not(this)
 
});
cs


jQuery객체를 사용하여 not() 함수 사용


".btn"중에서 id값이 "#hello"인 요소 제외


1
$(".btn").not($("#hello"))
cs


".btn"중에서 3번째 요소만 제외


1
2
3
$(".btn").not($(".btn:nth-child(3)"))        // 1부터 카운트
 
$(".btn").not($(".btn:eq(2)"))                // 0부터 카운트
cs


CSS 셀렉터를 사용하여 not() 함수 사용


".btn"중에서 id값이 "#hello"인 요소 제외


1
$(".btn").not("#hello")



".btn"중에서 3번째 요소만 제외


1
2
3
$(".btn").not(".btn:nth-child(3)")        // 1부터 카운트

$(".btn").not(".btn:eq(2)")                // 0부터 카운트




요소의 숨김, 표시 처리

함수

 설명

 show([time, [function]])

 요소를 표시한다. 

 hide([time, [function]]) 

 요소를 숨긴다.

 toggle([time, [function]])

 요소의 숨김과 표시를 자동 반복한다.

 fadeIn([time, [function]])

 페이드 효과를 적용하여 요소를 표시한다. 

 fadeOut([time, [function]])

 페이드 효과를 적용하여 요소를 숨긴다. 

 fadeToggle([time, [function]])

 페이드 효과를 적용하여 요소의 숨김과 표시를 자동 반복한다. 

 slideDown([time, [function]])

 요소를 아래로 펼쳐서 표시한다. 

 slideUp([time, [function]])

 요소를 위로 접어서 요소를 숨긴다. 

 slideToggle([time, [function]])

 요소를 위, 아래로 접고 펼치는 효과를 사용하여 숨김과 표시를 자동 반복한다. 



* 시간값은 1/1000초 단위로 지정한다.

* 두 번째 파라미터인 콜백함수는 처리가 완료된 후 호출된다.

'Web 관련' 카테고리의 다른 글

Javascript+jQuery+Ajax 12일차  (0) 2019.02.13
Javascript+jQuery+Ajax 11일차  (0) 2019.02.12
Javascript+jQuery+Ajax 9일차  (0) 2019.02.08
Javascript에 관한 MVC 구조의 이해  (0) 2019.02.07
Javascript+jQuery+Ajax 8일차  (0) 2019.02.07

jQuery 이벤트 처리


- 웹 브라우저가 HTML요소를 인식한 후에 처리되어야 하므로 jQuery의 load 처리 안에서 정의한다.

- 이벤트는 함수 형태로 정의되어 있고, 해당 이벤트가 발생한 경우 호출될 함수를 콜백 파라미터로 전달한다.

- 콜백함수에는 이벤트의 정보를 갖는 e 객체가 전달된다.

* 필요한 경우 이 객체를 선언하고 활용할 수 있다.

* e.preventDefault()는 링크의 href 속성이나 폼의 submit 등에 대해서 HTML 요소가 수행해야 하는 기본 동작을 차단하는 역할을 한다.



1
2
3
4
5
6
7
// jQuery의 load처리 안에서 정의
 
$(function() {
    $("foo").이벤트이름(function( [e] ) {
        [e.preventDefault();]
    });
)};



주요 이벤트 종류


마우스 관련



 이벤트

 기능 

 click 

 요소를 클릭시에 동작한다. 

 mouseenter 

 어떤 요소의 영역 안에 마우스 커서가 들어간 경우 호출된다. 

 mouseleave

 어떤 요소의 영역 안에서 마우스 커서가 빠져나온 경우 호출된다. 

 dblclick

 더블클릭시에 동작한다. 

 hover

 mouseenter + mouseleave 


hover 이벤트


hover 이벤트의 경우 마우스가 요소 안에 들어간 경우와 빠져나온 경우를 처리해야 하기 때문에 콜백함수가 2개 설정되어야 한다.


1
2
3
4
5
6
7
8
9
10
11
12
// jQuery의 load처리 안에서 정의
 
$(function() {
    $("foo").hover(
        function() {
            ... 마우스가 요소 안에 들어간 경우 ...
        },
        function() {
            ... 마우스가 요소 안에 들어간 경우 ...
        },
    );
)};

키보드 관련

 이벤트 

 기능 

 keydown

 버튼을 누르고 있는 동안 지속적으로 발생한다. 

 keyup

 버튼을 눌렀다가 뗀 순간 발생한다.

 한글을 지원하므로 대부분의 키 처리시 사용 권장 

 keypress

 키보드를 눌렀다가 떼는 동작을 1회로 처리한다.

 한글인 경우 발생되지 않기 대문에 사용을 권장하지 않는다.



keycode

- 키보드에 부여된 일련번호
- 키 이벤트 발생시 이벤트 객체를 통해 전달된다.
- 이 값을 사용하여 특정 버튼이 눌러진 경우를 판별할 수 있다.

1
2
3
4
5
6
7
8
// jQuery의 load처리 안에서 정의
$(function() {
  $("#foo").keyup(function(e){
    if (e.keycode ===13)
    ... 엔터키가 눌러진 경우의 처리...
 
  });
});



요소의 크기 조회

width(), height 함수의 사용

특정 요소의 크기

1
2
var w = $("#foo").width();
var h = $("#foo").height();
웹 페이지 전체의 크기

1
2
var w = $(document).width();
var h = $(document).height();

브라우저의 크기
1
2
var w = $(window).width();
var h = $(window).height();

스크롤바의 위치
1
var top = $(window).scrollTop();

반응형 기능

브라우저의 크기에 반응하여 동작하는 함수를 정의하고 브라우저가 열린 직후와 창 크기가 변경될 때 동작하도록 호출한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function responsive() {
    // 현재 창의 넓이
 
    var w = $(window).width();
    if (w >= ?) {
        ... 반응형 기능 구현 ...
    }
}
 
$(function() {
   // 브라우저가 열린 직후
   responsive();
 
   $(window).resize(function() {
        // 창 크기가 변경될 경우
        responsive();
   }); 
});


인피니티 스크롤

1
2
3
4
5
6
7
8
9
10
11
// jQuery의 load처리 안에서 정의
$(function() {
    $(window).scroll(function() {
        if ($(window).scrollTop() + $(window).height() >= $document.height()-15) {
 
            ... 스크롤이 맨 밑에 도착한 경우의 처리...
 
        }
    });
  
});


* ==이 아니라 >= 으로 해주는 것은 아이폰의 경우 스크린이 끝으로 가도 바운스 되기 때문(화면이 더 늘어난다.)

* -15 해주는 이유는 상태바 등의 크기를 고려한 것

'Web 관련' 카테고리의 다른 글

Javascript+jQuery+Ajax 11일차  (0) 2019.02.12
Javascript+jQuery+Ajax 10일차  (0) 2019.02.08
Javascript에 관한 MVC 구조의 이해  (0) 2019.02.07
Javascript+jQuery+Ajax 8일차  (0) 2019.02.07
Javascript+jQuery+Ajax 7일차  (0) 2019.02.01

※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※

 

javascript의 가장 큰 용도 중 하나는 HTML을 만들어내는 것

 

골격+디자인[비주얼 View]/내용[데이터(제이슨) Model]/제어[javascript -> Controller]

 

MVC 패턴

[코드를 model, view, controller로 나누는 패턴]

 

이걸 문법적으로 체계화 시켜놓은 언어들이 Spring, React, Vue 등등

 

공부하면서 Model은 어디고 view는 어디고 controller는 어디다 꼭 구별

 

※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※

'Web 관련' 카테고리의 다른 글

Javascript+jQuery+Ajax 10일차  (0) 2019.02.08
Javascript+jQuery+Ajax 9일차  (0) 2019.02.08
Javascript+jQuery+Ajax 8일차  (0) 2019.02.07
Javascript+jQuery+Ajax 7일차  (0) 2019.02.01
Javascript+jQuery+Ajax 6일차  (0) 2019.01.31

jQuery 초기화


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
 
<html lang="ko">
 
<head>
 
... meta태그 설정 및 CSS 처리...
 
</head>
 
 
 
<body>
 
... HTML 태그 ...
 
<!-- jQuery 참조 -->
 
// 1) 실행 시간의 이점 때문에 script 코드는 <body>태그 종료 직전 명시
 
// 2) 웹 브라우저의 캐시 기능을 활용하기 위해서 CDN방식으로 라이브러리 참조
 
<script src="http://code.jquery.com/jquery-3.2.1.min.js">
 
 
 
<!-- 개발자 작성 영역 -->
 
// 1) HTML파일에서 직접 스크립트 구현
 
// 2) 외부 파일로 작성 --> src 속성으로 참조
 
<script type="text/javascript">
 
/** 모든 곳에서 인식할 변수 및 함수 정의 영역 */
 
 
 
/** jQuery 구현 부분 */
 
$(function() {
 
// 이 영역이 페이지 로딩이 완료된 후 실행된다.(body의 onload 이벤트 --> 프로그래밍 언어에서의 main() 역할)
 
});
 
</script>
 
</body>
 
</html>


HTML 요소 접근


HTML요소를 jQuery 객체로 생성


1
var obj = $("CSS셀렉터");


- 대상 요소를 지정할 수 있는 CSS셀렉터를 사용한다.

- jQuery에서 사용한 CSS 셀렉터가 반드시 <style> 태그에 정의되어 있어야 하는 것은 아니다.

- 혼란을 피하기 위해 CSS에서는 class 형식으로만 셀렉터를 구성하고, jQuery에서는 가급적 id속성만으로 대상을 지정한다.

* CSS : TAG나 ID속성을 사용한 셀렉터 지양.

    자손, 자식 셀렉터의 구성도 가급적 class속성만으로 구성

* jQuery : 대부분의 경우 ID속성을 사용하지만

  동시에 여러 개의 객체를 제어해야 할 경우는 class속성도 사용.


HTML요소 내의 내용 제어


html() 함수는 파라미터가 있을 경우 설정(setter), 파라미터가 없을 경우 리턴(getter)의 기능을 한다.


요소 안에 내용을 설정하기


1
$("#foo").html(설정할 내용);


요소 안의 내용을 가져오기


1
var content = $("#foo").html();


JSON 표기법


                                                                                              ┌>JSON --> 배열이나 또다른 JSON 포함 가능 
Javascript에서 사용되는 자료의 나열 방법으로 이름(key)와 값(value)의 쌍으로 구성된다.
                                                                                              └> 일반변수(string, int, boolean, float) / 배열 -> 원소 형태로 일반변수, JSON 
이름(key)에는 따옴표 사용이 자유롭다.
  - 이름에 "-"가 있는 경우는 따옴표 필수 ==> ex) background-color (x), "background-color" (o)



기본 정의 방법
1
2
3
4
5
6
7
8
9
10
11
var my_height = 175.6;
var json = {
      name : 'JS학생',                 // 문자열은 따옴표 사용
      age : 20,                           // 숫자형이나 boolean은 따옴표 사용 안함 
      height : my_height          // 다른 변수를 값으로 사용도 가능함
};
 
// 값에 접근하기
console.log(json.name);
console.log(json.age);
console.log(json.height);

배열데이터를 포함하는 경우
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var lecture = {
       start : '2017-09-06',
       end : '2018-01-31',
       subject : [ 'html''css''javascript''php']
                      0      1        2           3
};
 
// 값에 접근하기
console.log(lecture.subject[0]);
 
// 반복문으로 값에 접근하기
for (var i=0; i<lecture.subject.length; i++) {
        console.log(lecture.subject[i]);
}

JSON끼리의 중첩
  - 다른 JSON을  포함할 수 있다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var address = {
      postcode : '12345',
      header : '서울시 강남구 역삼동',
      footer : '123-45'
};
 
var member = {
       user_id : 'student',
       user_name : '학생',
       addr : address      // key의 이름과 value의 변수명이 동일한 경우 에러는 아니지만 코드가 혼란스러워 질 수있다.
                            // 이름에 따옴표를 붙여서 혼란을 피할수도 있지만 차선책일뿐..
};              
 
// 값의 접근
console.log(member.addr.postcode);





축약해서 표현한 경우


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var member = {
 
    user_id : 'student',
 
    user_name : '학생',
 
    addr: {
 
        postcode : '12345',
 
        header : '서울시 강남구 역삼동',
 
        footer : '123-45'
 
    }
 
}


JSON이 배열에 들어가는 경우


1
2
3
4
5
6
7
var book1 = { subject: 'html입문', price: 32000 };
 
var book2 = { subject: 'CSS활용', price: 28000 };
 
var book3 = { subject: 'jQuery실무', price: 47000 };
 
var books = { book1, book2, book3 };

축약표현


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var books = [
 
    {
 
        subject: 'html입문'
 
        price: 32000
 
    },
 
    {
 
        subject: 'CSS활용'
 
        price: 28000
 
    },
 
    {
 
        subject: 'jQuery실무',
 
        price: 47000
 
    }
 
 
 
];


JSON을 포함하는 배열이 다른 JSON에 들어가는 경우


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var library = {
 
    name : '강남도서관',
 
    address : '서울시 강남구 ... ',
 
    open : '오전 09시 00분',
 
    close : '오후 06시 00분',
 
    book_list: [
 
        { subject: 'html입문', price: 32000 },
 
        { subject: 'CSS활용', price: 28000 }, 
 
        { subject: 'jQuery실무', price: 47000 }
 
    ];
 
};

접근 방법 ex) library.book_list[0].subject

=> 반복문 적용대상


JSON에 포함된 함수


Javascript에서는 변수에 함수를 참조시킬 수 있다.


1
2
3
4
5
var hello = function() {
 
    ...
 
};

JSON은 key와 value의 쌍으로 이루어진 데이터 집합.(value=변수, 값)


1
2
3
4
5
6
7
var data = {
 
    foo: 123,
 
    bar: 456
 
};

즉, value에 function이 참조될 수 있다.


1
2
3
4
5
6
7
8
9
10
11
12
13
var data = {
 
    foo: 123,
 
    bar: function() {
 
        ...
 
        console.log(this.foo);
 
    }
 
};


같은 json에 포함된 다른 변수나 함수에 접근할 경우에는 this를 사용해야 함.

'Web 관련' 카테고리의 다른 글

Javascript+jQuery+Ajax 9일차  (0) 2019.02.08
Javascript에 관한 MVC 구조의 이해  (0) 2019.02.07
Javascript+jQuery+Ajax 7일차  (0) 2019.02.01
Javascript+jQuery+Ajax 6일차  (0) 2019.01.31
Javascript+jQuery+Ajax 5일차  (0) 2019.01.30

<img> 요소 제어


var myimg = document.getElementById("img요소의 id");


myimg.src = "이미지파일경로";

myimg.width = "200px";

myimg.height = "100px";



<form> 요소 제어


<form> 요소의 객체 획득하기


id속성값으로 접근하는 경우


// form의 id속성값이 'form_id'인 경우

var myform = document.getElementById("form_id");


name속성값으로 접근하는 경우


// form의 name속성값이 'form_name'인 경우

var myform = document.form_name;


획득한 <form>안의 <input>요소 접근


id속성값으로 접근하는 경우


var hello = document.getElementById("input_id");


name속성값으로 접근하는 경우


var myform = document.form_name;

var hello = myform.input_name;


name속성값을 사용하는 경우 아래와 같이 축약도 가능함


var hello = document.form_name.input_name;


획득한 <input> 요소의 입력값 처리


var myform = document.form_name;

var hello = myform.input_name;

hello.value = "hello world";            // 값의 설정

var msg = hello.value;                  // 값의 조회


name속성값을 사용하는 경우 아래와 같이 축약도 가능함


document.form_name.input_name.value = "hello world";

var msg = document.form_name.input_name.value;


획득한 <input> 요소에 대한 값의 입력여부 조회


if (!document.form_name.input_name.value) {

// 값이 입력되지 않은 경우의 처리

alert("내용을 입력하세요.");

document.form_name.input_name.focus();

return;

}



checkbox, radio의 제어


name속성이 동일한 요소들끼리 하나의 배열로 그룹화 됨


var foo = document.form1.myradio[0].value;


checked 프로퍼티를 사용하여 선택 여부를 조회하거나 선택 상태를 강제 설정할 수 있음.


// 선택 여부 검사

var foo = document.form1.myradio[0].checked;

if (foo) {

... 선택된 경우의 처리 ...

}


// 강제 선택

document.form1.myradio[0].checked=true;


배열이라는 특성때문에 반복문을 통한 제어가 가능


var checkbox = document.form_name.checkbox_name;

var count = 0; // 선택된 항목의 수


for (var i=0; i<checkbox.length; i++) {

if (checkbox[i].checked) {

count++;

}

}


하나라도 선택되었는지 여부만 판단할 경우는 count++; 바로 밑에서 break; 적용

(반복문을 다 돌 필요가 없으니까)




드롭다운의 제어


- <select> 태그로 표현되는 드롭다운 요소는 그 자체가 배열이며 <option> 태그들이 배열의 요소가 된다.


- 드롭다운 객체에 대한 selectedIndex는 선택된 요소의 배열 인덱스를 의미


var dropdown = document.form_name.select_name;


// 특정 위치 강제 선택

dropdown.selectedIndex = 2;


// 현재 선택된 요소의 위치

var choice_index = dropdown.selectedIndex;


// 현재 선택된 요소의 value값

var choice_value = dropdown[choice_index].value;


주로 첫 번째 <option> 요소는 선택을 요구하기 위한 안내문이 표시되는 경우가 많기 때문에

selectedIndex값이 0인 경우는 선택한 것으로 간주하지 않는다.


if (dropdown.selectedIndex == 0) {

... 선택되지 않은 경우의 처리 ...

}


<form>의 reset, submit 처리


reset


document.form_name.reset();


※HTML에서

<input type="reset">

<button type="reset">버튼</button>

한 것과 같은 효과


submit


- form 요소의 action속성에 지정된 페이지로 사용자의 입력내용을 전송하는 기능

- <input type="submit"> 요소를 클릭하거나 아래의 자바스크립트 구문의 호출을 통해서 구현된다.


document.form_name.submit();


submit 이벤트


<form> 요소에 onsubmit 이벤트 적용 후 return false; 처리


<form name="form_name" method="post/get" action="웹프로그램 URL" onsubmit="js함수(); return false;">

</form>


- 여기서 JS함수()는 입력값의 유효성을 검사하는 기능을 함 

- submit의 특성상 일단 입력값을 보내려고 하기 때문에 return false();를 뒤에 걸어둠. (안 그러면 함수를 통과 못 해도 일단 실패한 것을 보냄)

- JS함수()에서 form의 submit()함수를 사용하여 입력값 검사 후 강제 전송해야 함


function JS함수() {

... 입력값 검사 ...


document.form_name.submit();

}


- JS함수 안에 에러가 있을 경우 그 이후 부분은 실행되지 않기 때문에 페이지가 새로고침 되는 현상이 발생한다.

- 이 경우 한 블록씩 코드를 지워가면서 에러가 발생하는 위치를 찾아야 한다.

'Web 관련' 카테고리의 다른 글

Javascript에 관한 MVC 구조의 이해  (0) 2019.02.07
Javascript+jQuery+Ajax 8일차  (0) 2019.02.07
Javascript+jQuery+Ajax 6일차  (0) 2019.01.31
Javascript+jQuery+Ajax 5일차  (0) 2019.01.30
Javascript+jQuery+Ajax 4일차  (0) 2019.01.30

+ Recent posts