목록web/JavaScript (9)
Practice makes perfect

이벤트(Event) : 이벤트는 간단하게 사용자의 어떠한 동작에 따라 기능이 실행되는 것을 의미합니다. 이벤트는 이벤트 대상, 이벤트 종류, 이벤트가 발생했을 때 실행되는 함수, 이 3가지로 구성되어 있습니다. 이벤트 대상은 특정 태그를 의미하고 이벤트의 종류는 click, drag, onmouse 등 여러 가지 종류가 있습니다. 1. window 객체의 load 이벤트 load : 이벤트 이름 or 이벤트 타입 onload : 이벤트 속성 이벤트 핸들러 or 리스너 : 이벤트 속성에 할당된 함수 이벤트 모델 : 문서 객체에 이벤트 연결하는 방법 이벤트 연결 : window 객체의 onload 속성에 함수 자료형을 할당하는 것 * document - html의 명령어에 접근할 수 있는 태그의 느낌으로 알..

문서객체모델(DOM, Document Object Model) - 넓은 의미 : 웹브라우저가 HTML 페이지를 인식하는 방식 - 좁은 의미 : document(body를 관리) 객체와 관련된 객체의 집합 - HTML 페이지에 태그를 추가, 수정, 제거할 수 있음 - 기본적인 자바스크립트만으로 DOM을 다루기에는 너무 복잡하므로, 간단한 내용만 살펴보고 자세한 내용은 jQuery와 함께 사용 DOM 관련 용어 - 문서 객체 : html or body 태그를 자바스크립트에서 이용할 수 있는 객체로 만들면 그것이 문서 객체. - 노드 : 각 요소(head, body, title, script, h1, HEADER ...) 1) 요소노드(Element Node):HTML 태그. 2) 텍스트노드(Text Node..

객체 : 객체는 관련된 데이터와 함수(일반적으로 여러 데이터와 함수로 이루어지는데, 객체 안에 있을 때는 보통 프로퍼티와 메소드라고 부릅니다)의 집합입니다. 1. 객체의 생성 - 키:요소 { } (소괄호) 사이에 데이터를 key - value 로 넣음. 2. 객체의 속성과 메서드 속성 : 객체 내부에 있는 하나하나의 값. - 객체의 속성이 가질 수 있는 자료형 - - 속성과 메서드의 구분 ( 변수 선언) key ; value 로 저장하여 접근할 수 있도록 합니다. - this 키워드:자바스크립트는 this 키워드를 생략할 수 없다. (this - 자신의 영역 안에 있는 메모리에 접근) 3. 객체 한번에 모두 불러오기 4. 객체와 관련된 키워드 ① in 키워드:해당 키가 객체 안에 있는지 확인(존재 유무)..

1. 함수를 매개 변수로 받는 함수 ① 익명함수를 매개변수로 전달 callFunctionTimes 함수의 형태로 'Hello JavaScript...' 가 출력됩니다.(x5) ② 선언적 함수를 매개변수로 전달 callFunctionTimes 함수의 형태로 justFunction이 출력됩니다.(x5) 2. 자바스크립트 내장 함수 ① eval(string) : string을 자바스크립트로 실행. alert(willEval) 실행. 문자열 데이터를 그대로 실행. eval(willEval) 실행. 문자열로 보는 것이 아니라 javascript code로 인지하고 10 이라는 값만 출력 ② isFinite(number) - number가 무한한 값인지 확인 - 자바스크립트는 0으로 숫자를 나누면 Infinity(..

함수 ※ method 와 함수의 차이 - 함수 : 범용적으로 누구든지 필요로하면 호출하여 사용할 수 있도록 정의되어 있는 것. - method : 참조자형으로, 객체(object)에 특화 되어있는 특징이나 기능을 정의하고 있는 것 1. 함수의 개요 - 익명함수 : 이름을 가지고 있지 않은 함수. - 선언적 함수 : 이름을 가지고 있는 함수. ● 익명함수의 정의 (구조 - R과 동일) = 이름을 가지고 있지 않은 함수. ● 함수의 호출 방법 변수의 이름으로 함수를 호출합니다. ● 내가 정의한 코드는 소스코드가 보여줍니다. ● 소스코드(x) - 내장함수는 보이지 않습니다. ● 선언적 함수의 정의 = 이름을 가지고 있는 함수 2. 함수의 재정의 : 함수를 한번 더 선언해야할 상황. ① 익명함수의 재정의 (마지..

while 문 : 어떤 조건문이 참이기만 하면 문장을 계속해서 수행합니다. while 문은 다음과 같습니다. 예제 1) var value = 1; while(value < 5){ alert(value+'번째 반복'); value++; } do ~ while 문 var value = 1; do{ alert(value+'번째 반복.'); value++; }while(value

if 조건문 : 조건문은 if로 시작합니다. if 뒤의 괄호에 조건이 오고, 조건이 될 수 있는 값는 Boolean입니다. Boolean의 값이 true라면 조건이 담겨진 괄호 다음의 중괄호 구문이 실행됩니다. java와 동일하게 사용합니다 . else : if문의 조건이 true라면 if의 중괄호 구간이 실행되고, false라면 else 이후의 중괄호 구간이 실행됩니다. 즉 else는 주어진 조건이 거짓일 때 실행할 구간을 정의하는 것입니다. else if : else if는 좀 더 다양한 케이스의 조건을 검사할 수 있는 기회를 제공합니다. else if의 특징은 if나 else와는 다르게 여러개가 올 수 있습니다. else if의 모든 조건이 false라면 else가 실행됩니다. else는 생략 가능..

undefined 자료형 1. 존재하지 않는 것을 표현하는 자료형 - 한번도 사용하지 않는 자료형 2. 변수를 선언했지만 초기화 하지 않았을 때. - 값을 저장하지 않은 자료형 ( 데이터를 담기 전까지 자료형이 정해지지 않습니다.) * 동적 언어 : 값을 넣을 때까지 자료형이 결정되지 않는 언어( R, Python, JavaScript...) * 정적 언어 : 자료형이 미리 결정되어 있는 언어(Java, DataBase...) 연산자 산술 연산자 : +, -, *, /,% 비교 연산자 : , =, ==, != (결과값 : boolean) 논리 연산자 : &&, ||, ! (결과값 : boolean) 복합 대입 연산자 : += , -=, *=, /=, %= (누적) 증감 연산자 : ++, -- - Java..