요소의 탐색


메서드 체인


- 하나의 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

URL 제어하기


브라우저의 현재 URL 조회


var now_url = location.href;


브라우저의 현재 페이지를 지정된 URL로 이동


location.href = 'URL';


현재 페이지를 새로 고침


//랜덤값과 같이 쓰여 인증번호 새로 받기 할 수 있음.

location.reload();


웹 브라우저 history의 이전 페이지로 이동


history.back();


웹 브라우저 history의 다음 페이지로 이동


history.forward();



웹 브라우저의 정보 조회


웹 브라우저의 이름, 버전정보, 운영체제 정보 등이 포함된 문자열 값.


var agent = navigator.userAgent;


이 값에 특정 단어가 포함되어 있는지 여부를 판단하여 브라우저나 운영체제 종류, 모바일/PC 여부 등을 확인할 수 있다.


var agent = navigator.userAgent;


if (agent.indexOf('검사할 단어') > -1) {

... 처리내용 ...

}


HTML 제어


HTML 요소를 객체로 생성하기



var mytag = document.getElementById("id속성값");


획득한 객체의 내부에 대한 내용 접근


// 내용 적용하기


mytag.innerHTML = "... 적용할 내용 ...";


// 적용된 내용 조회하기


var content = mytag.innerHTML;



획득한 객체 CSS 속성 접근


// 내용 적용하기


mytag.style.css관련_프로퍼티 = "값";


// 적용된 내용 조회하기


var css = mytag.style.css관련_프로퍼티;


css관련_프로퍼티의 이름 규칙은 css에서 -로 표시되던 부분이 없어지고 대문자가 사용됨

ex) [css] background-color --> [js] backgroundColor



획득한 객체 CSS 속성 접근


// 내용 적용하기

mytag.className = "값";


// 적용된 내용 조회하기

var cls = mytag.className;




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

Javascript+jQuery+Ajax 8일차  (0) 2019.02.07
Javascript+jQuery+Ajax 7일차  (0) 2019.02.01
Javascript+jQuery+Ajax 5일차  (0) 2019.01.30
Javascript+jQuery+Ajax 4일차  (0) 2019.01.30
Javascript 오답노트  (0) 2019.01.28

Math 내장객체


수학과 관련된 기능을 제공한다.


int abs(int param)


- param의 절대값을 리턴한다.


int max(int a, int b)


- a와 b중에서 큰 값을 리턴한다.


int min(int a, int b)


- a와 b중에서 작은 값을 리턴한다.


int round(Number num)


- num을 소수점 첫째 자리에서 반올림한 결과를 리턴한다.


int floor(Number num)


- 소수점 이하 값을 버린다.


int ceil(Number num)


- 소수점 이하 값을 올린다.



랜덤값 얻기


Math.random() 함수는 0에서 1 사이의 난수를 발생시켜 리턴한다.

실수 형태로 리턴되는 값의 범위를 조절하기 쉽지 않기 때문에 다음과 같이

함수를 정의하여 사용해야 한다.


function random(n1, n2) {

return parseInt(Math.random() * (n2-n1+1)) + n1;

}


Date 내장 객체


객체 생성 방법


// 시스템의 현재 시각

var date1 = new Date();

// 2017년 12월 24일 -> 월은 0부터 카운트된다.

var date2 = new Date(2017, 11, 24);


객체의 메서드


getter : 프로퍼티(멤버변수)의 값을 리턴하기 위한 함수

* 이름이 get변수이름()의 형식을 갖는다.


setter : 파라미터를 통해 프로퍼티의 값을 변경하는 함수

* 이름이 set변수이름()의 형식을 갖는다.


구분 

조회(getter) 

설정(setter) 

 년도

int getFullYear()

void int setFullYear() 

 월

int getMonth()

void int setMonth()

 일

int getDate()

void int setDate() 

 요일

int getDay()

void int setDay()

 시

int getHours()

void int setHours()

 분

int getMinutes()

void int setMinutes()

 초

int getSeconds()

void int setSeconds()

 타임스탬프

int getTime()

void int setTime()


cf) getYear 함수는 1900~1999년까지만 지원되므로 FullYear로 확장된 것


타임스탬프


1970년 1월 1일 이후 지난 시간을 밀리세컨드(1/1000초)로 표현한 값



두 날짜 사이의 차이 구하기


두 개의 timestamp값중 큰 값과 작은 값의 차를 단위의 기준값으로 나눌 경우 날짜 계산이 가능함

* 지난 날짜를 처리하는 경우 : 소수점 아래 버림(Math.floor()함수 사용)

* 다가올 날짜를 계산하는 경우 : 소수점 아래 올림(Math.ceil()함수 사용)


콜백함수


Javascript 함수 파라미터 중에 다른 함수를 전달하는 경우, 파라미터로 전달되는 함수를 콜백함수라고 한다.


function hello() {

... 함수 내용 ...

}


function use_callback(a, b, callback) {

var c = a+b;

callback();

}


// 다른 함수를 파라미터로 전달


use_callback(100, 200, hello);




다음과 같이 축약한 형태로도 사용 가능


function use_callback(a, b, callback) {

var c = a + b;

callback();

}


// 다른 함수를 파라미터로 전달


use_callback(100, 200, function() {

... 함수 내용 ...

])


타이머 처리


지정된 시간(1/1000초 단위)마다 한 번씩 콜백함수 반복 호출


setInterval(function() {

... 구현내용...

}, 시간);


지정된 시간(1/1000초 단위)만큼 딜레이 후 콜백함수를 1회 호출


setTimeout(function() {

... 구현내용 ...

}, 시간);


window 내장 객체


브라우저의 새창 팝업 열기/닫기 기능 제공


a.html을 새 창(새 탭)으로 열기


window.open('a.html');


a.html을 팝업으로 열기


// window.open('URL', '창이름', '옵션');

window.open('a.html', 'mywin', 'width=500, height=300, scrollbars=no, toolbar=no, menubar=no, status=no, location=no');

[이건 외우지는 말고 긁어와서 쓸 수 있는 정도로만]


- 창이름

* 부여하지 않을 경우 매번 새 팝업창이 생성됨

* 부여할 경우 한번 사용한 팝업창을 재사용함

- 옵션

* 창 크기 관련 : width, height

창의 가로,  세로 크기를 정수로 지정

* 창 모양 관련 : scrollbars, toolbar, menubar, status, location

yes/no로 값을 지정

location의 경우 피싱 사이트 방지를 위해서 동작하지 않음[no값에서 주소를 직접적으로 확인 못 하기 때문]


현재 창 닫기


windows.close();

//혹은

self.close();


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

Javascript+jQuery+Ajax 7일차  (0) 2019.02.01
Javascript+jQuery+Ajax 6일차  (0) 2019.01.31
Javascript+jQuery+Ajax 4일차  (0) 2019.01.30
Javascript 오답노트  (0) 2019.01.28
Javascript+jQuery+Ajax 3일차  (0) 2019.01.28

+ Recent posts

티스토리툴바