재유's

HTML 요소 접근HTML 요소를 jQuery객체로 생성 var obj = $("css셀렉터"); 대상 요소를 지정할 수 있는 css셀렉터를 사용한다.jQuery에서는 가급적 id속성만으로 대상을 지정한다. - css : Tag나 ID속성을 사용한 셀렉터 지양 자손, 자식 셀렉터의 구성도 가급적 class속성만으로 구성. - jQuery : 대부분의 경우 ID속성을 사용하지만 동시에 여러개의 객체를 제어해야 할 경우 class속성도 사용. HTML 요소 내의 내용 제어html() 함수는 파라미터가 있을 경우 설정(setter), 파라미터가 없을 경우 리턴(getter)의 기능을 한다. 요소 안에 내용을 설정하기 (setter)jQuery1$("#foo").html(설정할 내용); javascript1do..

jQuery 초기화1234567891011121314151617181920212223242526272829303132333435 ...meta 태그 설정 및 css 처리 ... HTML ... 태그 /** 모든 곳에서 인식할 변수 및 함수 정의 영역*/ /** jQuery 구현 부분*/ /** * 1) HTML파일에서 직접 스크립트 구현 * 2) 외부 파일로 작성. --> src 속성으로 참조 */ $(function(){ /** * 이 영역이 페이지 로딩이 완료된 후 실행된다. => body의 onload 이벤트 프로그래밍 언어에서의 main() 역할 */ }); jQuery 참조 - 실행시간의 이점 때문에 script 코드는 태그 종료 직전에 명시한다. - 웹 브라우저의 캐시 기능을 활용하기 위해서 ..

Window 내장 객체 브라우저의 새창 팝업 열기/닫기 기능 제공 a.html을 새창(새탭)으로 열기 window.open('a.html'); a.html을 팝업으로 열기12// window.open('url', '창이름', '옵션');window.open('a.html', 'mywin', 'width=300, height=500, scrollbars=no, toolbar=no, menubar=no, status=no, location=no'); * 창 이름 - 부여하지 않을 경우 매번 새 팝업창이 생성됨 - 부여할 경우 한번 사용한 팝업창을 재사용함 * 옵션 - 창 크기 관련 : width, height=> 창의 가로, 세로 그기를 정수로 지정 - 창 모양 관련 : scrollbars, toolbar,..

콜백 함수 JavaScript의 함수 파라미터 중에서 다른 함수를 전달하는 경우 이 때 파라미터로 전달되는 함수1234567891011function hello(){ ... 함수 내용...} function use_callback(a, b, callback){ var c = a + b; callback();} // 다름 함수를 파라미터로 전달use_callback(100, 200, hello); 다음과 같이 축약한 형태로도 사용 가능123456789function use_callback(a,b, callback){ var c = a+b; callback();} // 다른 함수를 파라미터로 전달use_callback(100, 200, function (){ ... 함수 내용...}); 타이머 처리 지정된 ..

Date 내장 객체 Date는 날짜를 갖고 놀수 있는(?) 내장 객체 객체 생성 방법1234//시스템의 현재 시각var date1 = new Date();// 2019년 01월 30일 -> 월은 0부터 카운트 된다.var date2 = new Date(2019,0,30); 객체의 메서드- getter : 프로퍼티(멤버변수)의 값을 리턴하기 위한 함수=> 이름이 get변수이름()의 형식을 갖는다.- setter : 파라미터를 통해 프로퍼티의 값을 변경하기 위한 함수=> 이름이 set변수이름()의 형식을 갖는다. 구분 조회(getter) 설정(setter) 년도 int getFullYear() void setFullYear(int) 월 int getMonth() void setMonth(int) 일 int ..

Array(배열) 같은 종류의 변수를 캐비넷 같은 공간에 그룹화 한 형태 배열의 생성12345var data = new Array('a', 'b', 'c'); // 혹은 var data = ['a', 'b', 'c']; 배열의 특성* 생성된 배열은 0부터 순차적으로 증가하는 index값을 갖는다. => 이 특성 때문에 배열은 일반적으로 반복문과 함께 사용된다.* 데이터의 접근은 index를 통해서 이루어진다.ex) 값 읽기 : var a = data[0];ex) 값 저장하기 : data[1] = 100; 배열의 길이모든 배열은 그 자체가 하나의 객체가 된다.배열 객체의 갖는 프로퍼티 중 length는 배열의 길이(칸수)를 조회하는 기능을 갖는다.12var data = ['a', 'b', 'c'];var ..

내장 객체웹 페이지 제작에 필요한 기본 기능들이 정의되어 있는 객체.브라우저에 내장되어 있기 때문에 개발자는 별도의 객체 정의 과정을 생략하고내장 객체에 포함된 프로퍼티와 함수들의 기능을 파악하여 활용할 수 있다. String 내장 객체문자열 데이터는 그 자체가 하나의 객체가 된다. * length : 문자열의 길이(글자수)를 조회할 수 있는 프로퍼티 12var name = "Javascript";var word_count = name.length; // int형 * charAt : position번째의 글자를 리턴1string charAt(int position) * indexOf : 문자열에서 search가 처음 나타나는 위치를 리턴한다. (0부터 시작)1int indexOf(string search..

객체 하나의 변수 안에 또 다른 변수들과 함수들을 기능의 성격에 따라 하나의 그룹으로 묶어서 포함시켜 놓은 형태- 객체는 웹페이지에 보여지는 모든 것이 될 수 있다.* HTML 태그가 JS에서는 객체로 인식될 수 있다.* 즉, HTML 태그 안에 있는 변수와 함수가 내장되어 있다는 의미가 된다.- 객체 안에 포함된 변수를 프로퍼티 혹은 멤버변수 라고 한다.- 객체 안에 포함된 함수를 메서드라고 한다. (보통 함수라고 이야기한다)- 메서드 안에서 같은 객체 내의 프로퍼티나 다른 메서드에 접근하기 위해서는 this키워드를 사용한다. 1234567891011121314// 비어 있는 임의의 변수 = 객체var foo = {}; // 프로퍼티 정의foo.num1 = 100;foo.num2 = 200; //메서드..

함수 정의의 또 다른 방법 함수는 변수와 동급이다. 즉, 변수에 함수가 대입될 수 있다.123456function hello(){ alert("안녕하세요.");} var world = hello; // 변수에 함수를 대입한다.world(); // 함수가 대입된 변수는 그 자체가 함수가 된다. 위의 형태는 다음과 같이 축약 표현이 가능하다.12345// 대입문이므로 {}뒤에 세미콜론이 존재해야 한다.var world = function () { alert("안녕하세요.");};world(); 변수 선언시에 데이터 형이 결정되지 않고 자동 캐스팅이 되기 때문에 !!!

JavaScript는 태그가 서로 분리되어 있어도 실행시에는 하나로 병합되어 동작한다. 12345678910111213141516171819202122 bin page var a = 10; var b = 20; ... var c = a + b; 소스코드 실행시점 HTML파일을 한 라인씩 해석하는 브라우저의 특성상 소스코드의 위치에 따라서 실행시점이 결정되므로 HTML태그를 제어하고자 하는 경우 제어하려는 HTML태그보다 소스코다 나중에 명시되어야 한다. case1 - 태그 닫기 직전에 스크립트 코드 명시123456 ... document.getElementById("foo").innerHTML = "hello"; => 스파게티 코드가 되어 가독성, 유지보수에서 좋지 않다. case2 - 태그에 스크립트 ..