PSE's blog

[JavaScript] STUDY 13 - Element 객체의 메서드

1. Element 객체의 메서드 예제) HTML 요소의 속성 조작 예제 2) HTML 요소의 속성 조작 Search engine 예제 3) 새로운 HTML 요소의 생성과 연결 Hello 예제 4) appendChild 메서드 1 2 3

[JavaScript] STUDY 12 - Element 객체의 속성 정리

1. Element 객체의 속성 ① - 요소의 크기, 위치와 관련된 속성 ● HTML 문서상에서 요소의 위치 예시) offsetTop, offsetHeight 속성 Web Publising 1. HTML 2. CSS 3. JavaScript 4. jQuery Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mollis lacinia ligula vitae eleifend. Nunc vehicula ac ex ac luctus. Fusce dolor tellus, ullamcorper in condimentum ac, rutrum vel magna. Aliquam eu lorem vestib..

[JavaScript] STUDY 11 - 문서 객체 모델(DOM)과 document 객체

1. 문서 객체 모델 1) 문서 객체 모델(DOM; Document Object Model) - 웹 브라우저가 HTML 문서를 인식하는 방식 - 좁은 의미로는 JavaScript에서 document 객체와 관련된 객체의 집합 - 브라우저는 HTML 문서의 내용을 해석해서 DOM 트리를 구축하고 DOM에 있는 내용이 브라우저 화면에 표시된다. 스타일시트나 JavaScript 프로그램에서 내용을 조작하는 것은 DOM에 포함된 내용을 조작하는 것이고 DOM에 포함 된 내용을 조작하면 브라우저 화면에 표시되는 내용이 바뀐다. 2) HTML DOM에서 모든 것은 노드(node)이다. - HTML 문서는 문서 노드(document node) - HTML 요소는 요소 노드(element node) - HTML 속성은..

[JavaScript] STUDY 10 - window 객체의 속성과 메서드

window 객체의 속성과 메서드 1. window 객체의 타이머 관련 메서드 1) JavaScript 타이머 ① 일정한 시간이 지난 후 지정한 기능을 수행하는 타이머 ② 일정한 시간 간격마다 지정한 기능을 수행하는 타이머 2) window.setTimeout 메서드 - 일정한 시간이 지난 후 지정한 기능을 수행하는 타이머를 등록 3) window.setInterval 메서드 - 일정한 시간 간격마다 지정한 기능을 수행하는 타이머를 등록 ① 매개변수 function : 일정 시간 후에, 또는 일정 시간 간격마다 실행할 기능 milliseconds : 일정 시간(ms 단위의 숫자) ② 반환 값 Timer ID : 등록한 타이머의 ID (number) window.setTimeout ( function, m..

[JavaScript] STUDY 9 - 객체

객체 1. 객체(Object) 프로그램 : 데이터(값) + 기능 프로그램 : 변수(variable) + 함수(function) 변수 : 데이터(값)를 저장 객체 : 데이터(변수) + 기능(함수) 객체 : 속성(property) + 메서드(method) 2. JavaScript 객체 배열과 비슷하게 값을 여러 개 가지고 있는 자료형 배열(array)은 인덱스(index)로 각 원소(item)에 접근하지만 객체(object)는 키(key)로 각 속성(property)에 접근 객체의 속성에는 모든 자료형이 가능 객체의 속성 중 자료형이 함수인 속성은 메서드(method)라고 함 배열(array) 원소(item) 인덱스(index) 데이터 객체(object) 속성(property) 키(key) 데이터와 동작 1..

[JavaScript] STUDY 8 - 함수

함수 1. 함수(Function), 메서드(Method) 프로그램에서 특정 동작을 수행하는 일정 코드 부분 JavaScript에서 다루는 자료형 중 하나(string, num, boolean, function, object, undefined) 하나의 큰 프로그램을 여러 부분으로 나누어 작성 가능 같은 함수를 하나의 프로그램, 혹은 여러 프로그램에서 여러 차례 호출 프로그램의 일부분을 수정하기 용이함 코드의 재사용이 용이함 Input (Parameters) → Function → Output(Return value) 2. 함수의 선언 필요한 함수를 작성하는 것 함수를 어떻게 선언하느냐에 따라 "선언적 함수"와 "익명 함수"로 나뉠 수 있다. ① 선언적 함수 함수의 식별자를 통해 호출할 수 있는 함수 이러..

[JavaScript] STUDY 7 - for 구문의 응용 (2)

1) 연습문제 : 배열 favorites에서 원소의 값이 "Coffee"이거나 "Tea"인 경우에만 원소의 인덱스와 값을 출력하는 프로그램을 작성하라. ● 풀이 ① : 반복문을 이용해 배열 favorites의 각 원소에 순차적으로 접근해서 "Coffee"와 "Tea"가 해당하는 배열의 인덱스를 확인하는 조건식을 추가함으로써 출력. var favorites = ["Coffee", "Juice", "Coke", "Milk", "Tea"]; for (var i = 0; i < favorites.length; i++) if (i == 0 || i == 4) document.writeln(i + ". " + favorites[i]); 배열의 값의 순서는 추후에 달라질 수 있으므로 배열의 값을 비교하는 조건식을 쓰..

[JavaScript] STUDY 6 - for 구문의 응용

1) 연습문제: 1부터 20까지 정수 중에서 짝수인 정수를 출력하는 프로그램을 작성하라. ● 풀이 ① - for 구문을 이용해 반복문을 작성할 때 고려할 사항 반복해서 실행할 문장 → document.writeIn(1); 반복해서 실행할 문장에서 변하는 값 (인덱스 변수를 이용해서 표현) → i = 2, 4, 6, 8, 10, 12, 14, 16, 18, 20 인덱스 변수의 초기값 = for 구문의 첫 번째 표현식(초기식) → i = 2; 인덱스 변수의 범위 = for 구문의 두 번재 표현식(조건식) → i

[JavaScript] STUDY 5 - 반복문

반복문 1) 반복문이 필요한 이유 같은 처리 과정을 되풀이하는 것이 필요하기 때문 학생 30명의 평균 성적을 구하려면 같은 과정을 30번 반복해야 한다. 2) while 구문 가장 간단한 형태의 반복문(loop) while (condition) statement; 예시) 2) do-while 구문 먼저 코드 블록을 실행하가ㅗ 조건을 검사하는 반복문 코드 블록을 최소한 한 번은 실행해야 하는 경우 사용하는 반복문 do { statement; } while (condition); 3) for 구문 (중요) while 구문은 조건에 비중을 두지만 for 구문은 반복 횟수에 비중을 둔다. for (initial; condition; after-thought) statement; while (condition) ..

[JavaScript] STUDY 4 - 조건문

1. 조건문 1) 조건문 조건(condition)에 따라서 여러 개의 실행 경로 가운데 하나를 선택 조건(condition)이 참(true)인지 거짓(false)인지에 따라 다른 절차를 수행(분기)하는 제어문 if (condition) conditional_code; → 원래는 한 문장 if (condition) conditional_code; → 들여쓰기를 통해 이 문장이 if 구문에 묶인 문장임을 나타낸다. 예시1) 연습문제 1) 어떤 숫자가 20보다 크고 40보다 작은 경우 "Hello World!"출력 연습문제 2) 어떤 숫자가 10보다 작거나 50보다 큰 경우 "Hello World!" 출력 3) if-else 구문 키워드 if 다음에 참(true) 또는 거짓(false)을 확인하기 위한 표현식..

[JavaScript] STUDY 3 - 배열과 연산자

1. 배열이란? 1) 배열 (Array) : 변수(저장 공간)들의 집합 같은 유형의 여러 값들을 저장하기 위해 배열을 사용한다. 여섯 가지 자료형 중 배열은 객체 자료형에 해당한다. 배열의 원소 (item) : 배열의 각 저장 공간. 배열의 인덱스 (index) : 배열의 원소에 접근할 때 사용하는, 0부터 시작하는 정수. 배열을 생성하는 방법 : 배열 리터럴([]), 대괄호로 생성한 다음 대괄호 안에 값을 쉼표로 구분해 입력한다. 배열에 접근하는 방법 : 변수의 식별자와 배열의 인덱스를 이용해 각 배열의 원소에 접근할 수 있다. ex) 예시 2. 연산자 1) 연산자와 피연산자 표현식(수식, Expression)은 연산자와 피연산자로 이루어지는데 연산자(Operator)는 특정한 연산을 나타내는 기호이고..

[JavaScript] STUDY 2 - JavaScript에서 사용하는 기본 용어

1. JavaScript에서 사용하는 기본 용어 1) 표현식 (Expression) - JavaScript에서 값(data)을 만들어내는 일련의 프로그램 코드 ex) 273 / 10 + 20 + 30 * 2 / "Hello World!" / x