본문 바로가기

Study/JavaScript

(6)

[모던자바스크립트]06 이벤트와 이벤트 처리기 06-1. 이벤트 알아보기 이벤트란 이벤트: 웹 브라우저나 사용자가 실행하는 어떤 동작 ex) 웹 문서에서 키보드의 키를 누르는 것, 웹 브라우저 창에 웹 페이지를 불러오는 것 이벤트는 웹 문서 영역에서 이루어지는 동작만 말함(ex. 웹 페이지 읽어 오기, 링크 클릭하기) (웹 브라우저 창 맨 위 제목 표시줄을 클릭하는 것은 이벤트가 아님(영역 벗어났으므로)) 문서 로딩 이벤트 서버에서 웹 문서를 가져오거나 위아래로 스크롤하는 등 웹 문서를 웹 브라우저 창에 보여주는 것과 관련된 이벤트 이벤트 이벤트가 발생하는 순간 abort 웹 문서가 완전히 로딩되기 전에 불러오기를 멈추었을 때 error 문서가 정확히 로딩되지 않았을 때 load 문서가 로딩이 끝났을 때 resize 문서 화면의 크기가 바뀌었을 때 ..

[모던자바스크립트]05 DOM의 기초 05-1. DOM과 DOM트리 DOM: Document Object Model, 문서 객체 모델 DOM이란 DOM: 자바스크립트같은 프로그래밍 언어로 웹 문서에 접근하고 제어할 수 있도록 웹 문서를 체계적으로 정리하는 방법 DOM에서는 웹 문서를 하나의 객체로 정의하고, 웹 문서를 이루는 모든 요소(텍스트, 이미지, 표 등)도 각각 객체로 정의함 ex) 웹 문서 전체 → document 객체, 웹 문서에 삽입된 이미지 → image 객체 (→ '문서 객체 모델' 이라고 함) 웹 문서의 객체들도 객체이므로 프로퍼티와 메서드를 가지고 있음 DOM 트리 웹 문서는 여러 가지 태그가 서로 포함 관계를 가지고 있음. 이런 관계 때문에 각 태그 간에는 '부모'와 '자식' 관계가 생김 Do it! html 요소 → ..

[모던자바스크립트]04 프로그래밍 한발 더 나가기, 함수와 스코프 04-1. 프로그래밍의 꽃, 함수 함수: 동작해야 할 목적대로 여러 개의 명령을 묶는 것 함수를 사용하는 이유 처리해야할 기능이 많지만, 함수 없이 작성한다면 사용자가 입력할 때마다 같은 명령을 계속 반복해야함 하지만, 기능별로 함수를 따로 만들어 둔다면 필요할 때마다 적절한 함수를 사용해서 함수별로 실행할 수 있음 함수 선언하고 호출하기 자바스크립트에는 다양한 함수들이 미리 만들어져 있으므로 개발자는 해당 함수를 가져와서 사용만 하면 됨 함수를 선언할 때는 function이라는 예약어를 사용하고, 함수 이름을 적은 후 중괄호 안에 실행할 여러 개의 명령을 묶음 함수 이름을 적는 이유: 나중에 이름을 사용해 함수를 실행하기 위해서 function 함수명(){ 명령(들) } 선언한 함수를 실행할 땐 함수 ..

[모던자바스크립트]03 연산자와 제어문 03-1. 프로그램 동작을 가리키는 기호, 연산자 산술연산자 A+B → A, B는 피연산자, +는 연산자 연산자 기능 사용 예 + 2개의 피연산자 값을 더함 c = a + b - 첫번째 피연산자 값에서 두번째 피연산자 값을 뺌 c = a – b * 2개의 피연산자 값을 곱함 c = a * b / 첫번째 피연산자 값에서 두번째 피연산자 값을 나눔 c = a / b % 첫번째 피연산자 값을 두번째 피연산자 값으로 나눈 나머지 c = a % b ++ 피연산자 값을 1 증가 a++ -- 피연산자 값을 1 감소 B++ 증가 연산자(++)와 감소 연산자(--)는 위치에 따라 처리 결과가 달라짐 후위연산자: x + y 계산 후 y가 1 감소함 전위연산자: y가 1 감소한 후 x + y 계산함 x = x + 1보다 x..

[모던자바스크립트]02 프로그래밍의 기본, 변수와 자료형 살펴보기 02-1. 프로그램에서 입력받고 출력하는 방법 alert(), confirm(), prompt()로 팝업 창 표시하기 alert() 함수 alert문은 알림 창을 표시 alert() 함수의 소괄호 안에 메시지를 입력하거나 변수를 사용하면 알림 창에 텍스트나 변숫값을 표시할 수 있음 알림 창에 내용을 표시하려면 alert() 함수의 소괄호 안에 큰따옴표나 작은따옴표와 함꼐 내용 작성 - 알림 창에 내용을 표시하려면 alert() 함수의 소괄호 안에 큰따옴표나 작은따옴표와 함꼐 내용 작성 alert("안녕하세요?") - 만약 a라는 변수에 숫자 10을 저장했다면 alert() 함수의 소괄호 안에 변수 이름을 지정해서 변수값을 표시할 수 있음 a = 10 alert(a) confirm() 함수 [확인] 버튼과..

[모던자바스크립트]01 자바스크립트 시작하기 ★ 자바스크립트와 자바는 다르다 자바스크립트 인터넷 초창기 웹 브라우저 시장을 석권하고 있던 넷스케이프에서 웹문서를 좀 더 동적으로 표시하기 위해 라이브스크립트를 개발 → 새로운 기술을 통해 HTML로는 할 수 없는 기능을 추가 1995년, 썬 마이크로즈시스템즈가 라이브스크립트 개발권을 넘겨받음(→ 자바 프로그래밍 언어를 만든 회사) 그 이름을 따서 '라이브스크립트' 대신 '자바스크립트'라는 이름을 붙이게 됨 1997년 6월, 자바스크립트는 스크립트 표준으로 채택되었고 이때 공식적인 이름이 '에크마스크립트'로 정해짐 에크마스크립트는 업데이트 될 때마다 이름의 뒤에 년도를 붙임(ex. 에크마스크립트 2015(ES6라고도 불림)) 에크마스크립트는 자바스크립트를 기반으로 표준화된 스크립트 언어임 자바스크립트는..

이전 1 다음

티스토리툴바