[JavaScript] 객체

객체 1. 객체(Object)객체는 배열이라는 것과 유사한 역할을 한다. 배열은 연관되어 있는 데이터를 담아내기 위한 일종의 그릇이다. 객체 역시도 마찬가지로 그릇이다.하지만 객체와 배열의 차이는 배열은 index가 자동으로 0부터 할당하여 추가되지만 객체는 index가 문자일 수도 있고 숫자일 수도 있다. (우리가 직접 지정할 수 있다.) 이 단원에서는 데이터를 담아내는 객체를 설명한다.지금까지 살펴본 배열은 아이템에 대한 식별자로 숫자를 사용했다. 데이터가 추가되면 배열 전체에서 중복되지 않는 인덱스가 자동으로 만들어져서 추가된 데이터에 대한 식별자가 된다. 이 인덱스를 이용해서 데이터를 가져오게 되는 것이다. 만약 인덱스로 문자를 사용하고 싶다면 객체(dictionary)를 사용해야 한다. 다른 언..

• format_list_bulleted Javascript/JavaScript
• · 2020. 7. 7.
• textsms

[JavaScript] 배열

배열 1. 배열배열(array)이란 연관된 데이터를 모아서 통으로 관리하기 위해서 사용하는 데이터 타입이다. 변수가 하나의 데이터를 저장하기 위한 것이라면 배열은 여러 개의 데이터를 하나의 변수에 저장하기 위한 것이라고 할 수 있다. 아래의 예제를 보자. 변수 name에는 문자 sibal이 할당되었다. 이제부터 name을 호출하면 문자 sibal을 사용할 수 있다. var name = 'sibal'alert(name); 2. 배열의 생성그렇다면 여러 개의 데이터를 하나의 변수에 담아서 관리할 수 있는 방법은 없을까? 있다. 배열을 쓰면 된다. 변수 member에 회원정보를 담아보자. 대괄호([])는 배열을 만드는 기호다. 대괄호 안에 데이터를 콤마(,)로 구분해서 나열하면 배열이 된다.var member..

• format_list_bulleted Javascript/JavaScript
• · 2020. 7. 7.
• textsms

[JavaScript] 함수 정의하는 방법

함수 정의하는 방법 1. 일반적인 방법함수는 function 뒤에 함수의 이름이 오고, 소괄호가 따라온다. 소괄호에 인자라는 값이 차례로 들어오는데 이 값은 함수를 호출할 때 함수의 로직으로 전달될 변수다. 인자는 생략 할 수 있다. 함수를 호출 했을 때 실행하게 될 부분이 중괄호 안쪽에 온다.다음 예제를 보자. 이 함수의 이름은 numbering이고, 내용은 0부터 9까지를 화면에 출력한다.function numbering(){ i = 0; while(i < 10){ document.write(i); i += 1; } }numbering();//함수 호출문장 2. 함수를 변수에 대입하는 방법자바스크립트는 함수를 정의하는 또 다른 방법을 제공한다. 다음 예제를 보자. 아래 방법은 함수를 정의 하는 또 다..

• format_list_bulleted Javascript/JavaScript
• · 2020. 7. 7.
• textsms

[JavaScript] 비교 ('=='와 '==='의 차이)

비교 ('=='와 '==='의 차이) 1. ==동등 연산자로 좌항과 우항을 비교해서 서로 값이 같다면 true 다르다면 false가 된다. '='가 두개인 것을 주의하자. '='가 하나인 것은 대입 연산자로 좌항의 값을 우항의 변수에 대입할 때 사용하는 것으로 의미가 완전히 다르다. alert(1==2) //falsealert(1==1) //truealert("one"=="two") //falsealert("one"=="one") //true 2. ===일치 연산자로 === 좌항과 우항이 '정확'하게 같을 때 true 다르면 false가 된다. 여기서 정확하다는 말의 의미에 집중하자. 아래 예를보자.alert(1=='1'); //truealert(1==='1'); //false 위의 결과는 이상하다. '..

• format_list_bulleted Javascript/JavaScript
• · 2020. 7. 7.
• textsms

자바스크립트 연산자 및 우선순위 정리

자바스크립트의 연산자는 대부분 다른 언어와 비슷하기 때문에 전반적인 설명은 아래에 정리한 우선순위를 보면 충분할 듯 합니다. 다만 오해의 소지가 있는 것들만 몇 개 정리하도록 하겠습니다. 1) / 연산자자바스크립트는 숫자가 모두 64비트 double 형이기 때문에 5 / 2 의 값이 C나 Java처럼 2가 아닌 2.5가 되는 것을 주의해야 합니다. console.log(5/2); // 2.5 2) typeof null이전 글(http://zeany.net/56) 에서도 살펴봤는데, null이 할당된 변수의 typeof나 null 자체의 typeof는 null이 아닌 object 입니다. var x = null; console.log(x); // nullconsole.log(typeof x); // obj..

• format_list_bulleted Javascript/JavaScript
• · 2019. 12. 30.
• textsms

[jQuery] jQuery API (7/7) - 선택자

[jQuery] jQuery API (7/7) - 선택자 - "*" : 전체 선택자 속성 선택자 - [name] : name 속성이 있는 요소를 선택 - [name = "value"][name2 = "value2"] : name 속성의 값이 value이고 name2 속성의 값이 value2 인 요소를 선택 - [name = "value"] : name 속성의 값이 value인 요소를 선택한다. - [name != "value"] : name 속성의 값이 value가 아닌 요소를 선택한다. - [name ^= "value"] : name 속성의 값이 value로 시작하는 요소를 선택한다. - [name |= "value"] : name 속성의 값이 value 이거나 value로 시작하는 요소를 선택한다. ..

• format_list_bulleted Javascript/jQuery
• · 2019. 7. 25.
• textsms

[jQuery] jQuery API (6/7) - Ajax

[jQuery] jQuery API (6/7) - Ajax 6. Ajax$.param() : 폼 요소들의 값을 변환하여 직렬화된 문자열로 표현한다. var params = {width : 1680, height : 1050}; // 배열 선언 var str = $.param(params); // Ajax로 전송가능하도록 직렬화 // $.param({a:[2,3,4]}); // "a[]=2&a[]=3&a[]4" // $.param({a:{b:1,c:2},d:[3,4,{e:5}] }); // "a[b]=1&a[c]=2&d[]=3&d[]=4&d[2][e]=5" .serialize() : 선택한 form의 데이터를 ajax로 전송할 수 있도록 직렬화 한다. / $("#name").serialize(); // i..

• format_list_bulleted Javascript/jQuery
• · 2019. 7. 25.
• textsms

[jQuery] jQuery API (5/7) - Event

[jQuery] jQuery API (5/7) - Event 5. Event - event 제어 .bind() : event가 발생하면 실행될 함수를 지정한다. (이미 생성된 DOM에 대하여) / $("#image").bind("mousedown", function(){ // id image 요소에 마우스를 클릭했을 때, 해당 함수 실행 지정 });.unbind() : bind()를 해제한다. .live() : 동적으로 생성된 DOM 객체들의 이벤트를 연결한다. (이벤트 버블 발생 가능) / $("#image").live("click", function(){ // id image 요소에 마우스를 클릭했을 때, 해당 함수 실행 지정 });.die() : live() 제거 .delegate() : 동적으로 ..

• format_list_bulleted Javascript/jQuery
• · 2019. 7. 25.
• textsms

[jQuery] jQuery API (4/7) - 효과

[jQuery] jQuery API (4/7) - 효과4. 효과.animate() : 해당 객체의 CSS 변화 효과를 준다. /$('p').animate({CSS Map}, {options}); / $('p).animate({color:'white', font-size : 22px}, {duration : 400, easing : 'ease-in', complete : function(){....}}); {queue:false} .delay() : 해당 시간만큼 실행을 delay 시킨다. / $("div").slideDown().delay(5000).slideUp(); // id div 요소를 슬라이드 다운 후 5초 후 슬라이드 업 한다. .stop() : 실행중인 애니메이션을 중지한다. $("div")..

• format_list_bulleted Javascript/jQuery
• · 2019. 7. 25.
• textsms

[jQuery] jQuery API (3/7) - 검증

[jQuery] jQuery API (3/7) - 검증 3. 검증.is() : 현재 상태를 확인하여 반환한다. true / false var chk = $("div").is(":animated"); // chk 는 true, false $.contains() : 첫번째 인자 요소에 두번째 인자 요소를 가지고 있는지 확인한다. $.contains($("#name"), $("#code")) // #name 요소 아래에 #code 요소가 있다면 true $.isArray() : 인자가 배열인지 확인한다. $.isArray(arr) // arr이 Array 인지 체크 true / false $.isEmptyObject() : 인자가 empty 인지 체크한다. $.isEmptyObject(arr) // arr 이..

• format_list_bulleted Javascript/jQuery
• · 2019. 7. 25.
• textsms