2. 웹개발/Javascript
-
[JavaScript (17)] Javascript Event(1) - 기초 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ 자바스크립트 이벤트 기본 ] 입니다. : ) ▶ 1. 이벤트(event)란? - 어떤 사건을 의미한다. ex) 특정 버튼을 클릭했을때, 돔이 다 로드 되었을때 - 브라우저는 이벤트를 감지할 수 있으며 이벤트 발생 시 알려 줄 수 있으며 이를 통해 사용자와 웹페이지가 상호 작용이 가능하다. - 이벤트 핸들러를 통하여 이벤트가 발생시 원하는 함수에 연결하여 실행 시킬 수 있다. ▶ 2. 이벤트 타입(event type) - 이벤트 타입은 발생한 이벤트의 종류를 말하며 키보드, 마우스, HTML DOM, Window 객체 등을 처리하는 이벤트등을 제공 한다. ex) 브라우저에서의 이벤트란..
[JavaScript (17)] Javascript Event(1) - 기초[JavaScript (17)] Javascript Event(1) - 기초 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ 자바스크립트 이벤트 기본 ] 입니다. : ) ▶ 1. 이벤트(event)란? - 어떤 사건을 의미한다. ex) 특정 버튼을 클릭했을때, 돔이 다 로드 되었을때 - 브라우저는 이벤트를 감지할 수 있으며 이벤트 발생 시 알려 줄 수 있으며 이를 통해 사용자와 웹페이지가 상호 작용이 가능하다. - 이벤트 핸들러를 통하여 이벤트가 발생시 원하는 함수에 연결하여 실행 시킬 수 있다. ▶ 2. 이벤트 타입(event type) - 이벤트 타입은 발생한 이벤트의 종류를 말하며 키보드, 마우스, HTML DOM, Window 객체 등을 처리하는 이벤트등을 제공 한다. ex) 브라우저에서의 이벤트란..
2020.08.25 -
[JavaScript (16)] Javascript Navigator, Screen 객체 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ 자바스크립트 윈도우 객체 - 네비게이터, 스크린 객체 ] 입니다. : ) ▶ 1. Navigator 객체 - 네비게이터 객체는 브라우저 공급자, 버전 정보 등 브라우저에 대한 다양한 정보를 가지고 있다. ▶ 2. Navigator 객체 속성 - appCodeName : 브라우저의 코드 네임을 반환한다. - appName : 브라우저의 이름을 반환한다. ex) // 익스플로러 10v이하, 크롬, 파이어폭스, 사파리, 오페라 모두 브라우저 Mozilla console.log(navigator.appCodeName); // Mozilla // 익스플로러 11v, 크롬, 파이어..
[JavaScript (16)] Javascript Navigator, Screen 객체[JavaScript (16)] Javascript Navigator, Screen 객체 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ 자바스크립트 윈도우 객체 - 네비게이터, 스크린 객체 ] 입니다. : ) ▶ 1. Navigator 객체 - 네비게이터 객체는 브라우저 공급자, 버전 정보 등 브라우저에 대한 다양한 정보를 가지고 있다. ▶ 2. Navigator 객체 속성 - appCodeName : 브라우저의 코드 네임을 반환한다. - appName : 브라우저의 이름을 반환한다. ex) // 익스플로러 10v이하, 크롬, 파이어폭스, 사파리, 오페라 모두 브라우저 Mozilla console.log(navigator.appCodeName); // Mozilla // 익스플로러 11v, 크롬, 파이어..
2020.04.13 -
[JavaScript (15)] Javascript Location, History 객체 (hash, host, href, replace 등) 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ 자바스크립트 윈도우 객체 - 로케이션, 히스토리 객체 ] 입니다. : ) ▶ 1. Location 객체 - 현재 브라우저에 표시된 HTML 문서의 URL 또는 관련 정보 (URL의 프로토콜, 호스트, 포토번호 등의 정보)를 얻거나, 브라우저에 새 문서를 불러오는 등에 사용할 수 있다. - window 객체의 일부이고 window.location 속성을 통해 접근할 수 있다.(window는 생략 가능 하다.) ▶ 2. Location 객체 속성 - href : 전체 URL 주소를 문자열로 반환 한다. (현재 URL을 가..
[JavaScript (15)] Javascript Location, History 객체 (hash, host, href, replace 등)[JavaScript (15)] Javascript Location, History 객체 (hash, host, href, replace 등) 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ 자바스크립트 윈도우 객체 - 로케이션, 히스토리 객체 ] 입니다. : ) ▶ 1. Location 객체 - 현재 브라우저에 표시된 HTML 문서의 URL 또는 관련 정보 (URL의 프로토콜, 호스트, 포토번호 등의 정보)를 얻거나, 브라우저에 새 문서를 불러오는 등에 사용할 수 있다. - window 객체의 일부이고 window.location 속성을 통해 접근할 수 있다.(window는 생략 가능 하다.) ▶ 2. Location 객체 속성 - href : 전체 URL 주소를 문자열로 반환 한다. (현재 URL을 가..
2020.04.12 -
[JavaScript (14)] Javascript window 객체 (setInterval, setTimeout, confirm, prompt, focus, blur 등) 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ 자바스크립트 윈도우 객체 - 브라우저 객체 ] 입니다. : ) ▶ 브라우저 객체 - 자바스크립트를 통해 브라우저의 여러 기능들을 제어할 수 있다. - 전역 객체(global object)로 해당기능들을 제공 한다. ▶ Window 객체 - 웹 브라우저의 창(window)을 나타내는 객체, 브라우저를 시작할 때 가장 처음 생성되는 객체이다. - 모든 객체, 전역 함수, 전역 변수, DOM등의 모든 요소들은 window 객체의 프로퍼티 이다. - window가 생성된 후 이 안에 다른 'wi..
[JavaScript (14)] Javascript window 객체 (setInterval, setTimeout, confirm, prompt, focus, blur 등)[JavaScript (14)] Javascript window 객체 (setInterval, setTimeout, confirm, prompt, focus, blur 등) 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ 자바스크립트 윈도우 객체 - 브라우저 객체 ] 입니다. : ) ▶ 브라우저 객체 - 자바스크립트를 통해 브라우저의 여러 기능들을 제어할 수 있다. - 전역 객체(global object)로 해당기능들을 제공 한다. ▶ Window 객체 - 웹 브라우저의 창(window)을 나타내는 객체, 브라우저를 시작할 때 가장 처음 생성되는 객체이다. - 모든 객체, 전역 함수, 전역 변수, DOM등의 모든 요소들은 window 객체의 프로퍼티 이다. - window가 생성된 후 이 안에 다른 'wi..
2020.04.12 -
[JavaScript (13)] Javascript Dom(Document Object Model, 문서 객체 모델) 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ 자바스크립트 돔(DOM) ] 입니다. : ) ▶ DOM(Document Object Model) 이란? - HTML, XML 문서에 접근하기 위한 인터페이스 - 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공 한다. - W3C의 표준 객체 모델 브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM이라 한다. 즉 모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고 이들 객체를 부자 관계를 표현할 수 있는 트리 구조로 구성한 ..
[JavaScript (13)] Javascript Dom(Document Object Model, 문서 객체 모델)[JavaScript (13)] Javascript Dom(Document Object Model, 문서 객체 모델) 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ 자바스크립트 돔(DOM) ] 입니다. : ) ▶ DOM(Document Object Model) 이란? - HTML, XML 문서에 접근하기 위한 인터페이스 - 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공 한다. - W3C의 표준 객체 모델 브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM이라 한다. 즉 모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고 이들 객체를 부자 관계를 표현할 수 있는 트리 구조로 구성한 ..
2020.04.08 -
[JavaScript (12)] Javascript String 객체, String 메소드(replace, substr, split, concat 등) 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ 자바스크립트 객체 - String ] 입니다. : ) ▶ 1. String 객체 생성 방법 - Javascript 에서 문자열은 간단하게 2가지 방법으로 생성 가능 하다. 1) 큰따옴표(""), 작은따옴표(''), backtick(``) ex) var 큰따옴표 = "큰따옴표"; var 작은따옴표 = "작은따옴표"; var 백틱 = `백틱`; // 백틱은 나중에 템플릿 리터럴 방식을 공부할때 자세히 알아보자. console.log(큰따옴표); console.log(작은따옴표); console.log(백틱); t..
[JavaScript (12)] Javascript String 객체, String 메소드(replace, substr, split, concat 등)[JavaScript (12)] Javascript String 객체, String 메소드(replace, substr, split, concat 등) 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ 자바스크립트 객체 - String ] 입니다. : ) ▶ 1. String 객체 생성 방법 - Javascript 에서 문자열은 간단하게 2가지 방법으로 생성 가능 하다. 1) 큰따옴표(""), 작은따옴표(''), backtick(``) ex) var 큰따옴표 = "큰따옴표"; var 작은따옴표 = "작은따옴표"; var 백틱 = `백틱`; // 백틱은 나중에 템플릿 리터럴 방식을 공부할때 자세히 알아보자. console.log(큰따옴표); console.log(작은따옴표); console.log(백틱); t..
2020.03.28