본문 바로가기
반응형

3. 웹개발/3_2_1 Javascript19

[JavaScript (17)] Javascript Event(1) - 기초 [JavaScript (17)] Javascript Event(1) - 기초 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ 자바스크립트 이벤트 기본 ] 입니다. : ) ▶ 1. 이벤트(event)란? - 어떤 사건을 의미한다. ex) 특정 버튼을 클릭했을때, 돔이 다 로드 되었을때 - 브라우저는 이벤트를 감지할 수 있으며 이벤트 발생 시 알려 줄 수 있으며 이를 통해 사용자와 웹페이지가 상호 작용이 가능하다. - 이벤트 핸들러를 통하여 이벤트가 발생시 원하는 함수에 연결하여 실행 시킬 수 있다. ▶ 2. 이벤트 타입(event type) - 이벤트 타입은 발생한 이벤트의 종류를 말하며 키보드, 마우스, HTML DOM, Window 객체 등을 처리하는 이벤트등을 제공 한다. ex) 브라우저에서의 이벤트란.. 2020. 8. 25.
[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. 4. 13.
[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. 4. 12.
[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. 4. 12.
[JavaScript (13)] Javascript Dom(Document Object Model, 문서 객체 모델) [JavaScript (13)] Javascript Dom(Document Object Model, 문서 객체 모델) 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ 자바스크립트 돔(DOM) ] 입니다. : ) ▶ DOM(Document Object Model) 이란? - HTML, XML 문서에 접근하기 위한 인터페이스 - 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공 한다. - W3C의 표준 객체 모델 브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM이라 한다. 즉 모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고 이들 객체를 부자 관계를 표현할 수 있는 트리 구조로 구성한 .. 2020. 4. 8.
[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. 3. 28.
[JavaScript (11)] Javascript Date 객체, Date 메소드(getDate, getFullYear, getMonth 등) [JavaScript (11)] Javascript Date 객체, Date 메소드(getDate, getFullYear, getMonth 등) 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ 자바스크립트 객체 - Date ] 입니다. : ) 0. Javascript에서의 날짜 표현 - 날짜와 시간(년, 월, 일, 시, 분, 초, 밀리초)을 위한 메소드를 제공하는 빌트인 객체, 생성자 함수 이다. - 하루는 86,400,000 밀리초(millisecond)로 계산 한다. ※ 참고 ㆍUTC(Universal Time, Coordinated(협정 세계시)) - 세슘 원자 진동수의 기반의 표준시간 - 오차가 30만 년에 1초라고 할 정도로 아주 정확하고 기준이 될 수 있는 시간 이라고 한다. ㆍGMT(Green.. 2020. 3. 27.
[JavaScript (9)] Javascript Number 객체, Number 메소드 [JavaScript (9)] Javascript Number 객체, Number 메소드 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ 자바스크립트 객체 - Number ] 입니다. : ) 0. Number 객체란 - 보통 자바스크립트에서 수를 표현할 때는 숫자 리터럴로 표현한다. var a = 7; - 하지만 수를 표현할 때 Number 객체로 생성할 수도 있다. 이 Number 객체를 숫자 값을 감싸고 있는 래퍼(wrapper)객체 라고 한다. var b = new Number(7); - Number 객체는 숫자(원시 숫자 자료형)를 다룰 때 유용한 프로퍼티와 메소드를 제공하는 레퍼(wrapper) 객체이다. 또한 간단하게는 문자열을 숫자로 변경해주는 용도로도 자주 사용된다. var c = new N.. 2020. 3. 26.
[JavaScript (8)] Javascript prototype chain(프로토타입 체인) [JavaScript (8)] Javascript prototype chain(프로토타입 체인) 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ 자바스크립트 프로토타입 체인 ] 입니다. : ) 0. 들어가기 앞서 Java, C++ 등: 클래스 기반 객체지향 프로그래밍 언어 Javascript : 프로토타입 기반 객체지향 프로그래밍 언어 Java : 객체 생성 이전에 클래스를 정의하고 이를 통해 객체(인스턴스)를 생성한다. Javascript : 클래스 없이(Class-less)도 객체를 생성할 수 있다. 물론 ECMAScript 6에서 클래스가 추가 되었다. 하지만 자바스크립트는 여전히 클래스를 기반으로 하진 않는다. 위에서 정의한 것과 같이 Javascript는 자바스크립트는 클래스라는 개념이 없다. 그.. 2020. 3. 25.
[JavaScript (7)] Javascript 함수2 - 기본 내장함수(eval, parseInt, encodeURI, encodeURIComponent 등) [JavaScript (7)] Javascript 함수2 - 기본 내장함수(eval, parseInt, encodeURI, encodeURIComponent 등) 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ 자바스크립트 함수 - 기본 내장함수 ] 입니다. : ) 0. 들어가기 앞서 앞서 함수의 정의, 호출방법, 그리고 활용 방법 등을 간단히 알아 보았다. 자바스크립트는 사용자의 편의를 위해 몇가지 내장함수를 제공한다. 이중 사용시 유의해야할 함수, 그리고 매우 유용한 함수들이 있으니 알아보도록 하자. 1. 내장 함수 ▶ 1. eval() - 문자열을 코드로 인식하게 하는 함수. - eval("문자열") ex) var a = "1+1"; console.log(a); // 1+1 console.log(ev.. 2020. 3. 23.
[JavaScript (6)] Javascript 함수(함수 기본, 재귀함수, 호이스팅 등) [JavaScript (6)] Javascript 함수(함수 기본, 재귀함수, 호이스팅 등) 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ 자바스크립트 함수 ] 입니다. : ) 0. 들어가기 앞서 함수의 정의, 호출방법, 그리고 활용 방법 등을 간단히 알아보려 한다. 1. 함수(function) 기본 ▶ 1. 함수(function)란? - 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록 - javascript에서 코드 집합을 나타내는 자료형) - 작업을 수행하거나 값을 계산하는 문장 집합 같은 자바스크립트 절차 - 함수도 일반 객체처럼 값으로 취급된다. 즉 하나의 데이터 타입 이다. 이러한 특징때문에 자바스크립트의 함수는 일급 객체라고 하며, 변수에도 할당 가능하다. ※ 참고할 용어 ◎ 일급시민(F.. 2020. 3. 20.
[JavaScript (5)] Javascript 제어문(2) - 반복문(for, while, break, continue) [JavaScript (5)] Javascript 제어문(2) - 반복문(for, while, break, continue) 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ 자바스크립트 반복문 ] 입니다. : ) 0. 들어가기 앞서 반복문이란, 똑같은 명령을 일정 횟수만큼 반복하여 수행하도록 제어하는 실행문 이다. 흔히 처음 개발을 시작하면 "for문으로 돌려"라는 말을 흔히 들을 수 있는데, 대표적인 반복문이 for문이고, 이외에 다양한 반복문이 존재한다. 자바스크립트에서 사용할 수 있는 반복문과 반복문에서 쓸수 있는 구문들은 다음과 같다. 1) for 문 2) for / in 문 3) for / of 문 4) while 문 5) do / while 문 6) label 문 7) break 문 8) con.. 2020. 3. 16.
[JavaScript (4)] Javascript 제어문(1) - 조건문(if문, switch문) [JavaScript (4)] Javascript 제어문(1) - 조건문(if문, switch문) 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ 자바스크립트 조건문 ] 입니다. : ) 0. 들어가기 앞서 특정 조건 만족 시(참인 경우) 실행하는 명령의 집합 이며, 어떤 작업을 수행하고 싶을 때 사용하는 것이 조건문이다. if 조건문과 switch 조건문이 대표적이며 삼항 연산자 도 사용 가능하다. 1. if ... else문 ▶ 1. 문법 if (조건식) { // statement1 } else if(조건식) { // statement2 } else { // statement3 } - if 안에 있는 조건식이 참인 경우 해당하는 if문, else if문을 실행 한다. - 조건문(if, else if)에 .. 2020. 3. 16.
[JavaScript (3)] Javascript 연산자 [JavaScript (3)] Javascript 연산자 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ 자바스크립트 연산자 ] 입니다. : ) 0. 들어가기 앞서 Javascript의 연산자에는 Javs나 C의 연산자와는 개념이 조금 달라서 헷갈릴 수 있는 연산자들이 존재한다. 그렇기 때문에 쉬워보이지만 연산자에 대해 한번은 짚고 넘어가는 것이 좋을 것 같다. 1. + 연산자 (문자열 결합 연산자) - + 연산자는 더하기 연산, 문자열 연결 연산을 수행. - 모두 숫자일 경우에만 더하기 연산, 나머지는 문자열 연결 연산이 이루어 진다. ex) var addTest1 = 3+6; var addTest2 = 1+'God'; var addTest3 = 'God'+'1'; console.log(addTest1).. 2020. 3. 16.
[JavaScript (2)] Javascript 배열 [JavaScript (2)] Javascript 배열 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ 자바스크립트 배열 ] 입니다. : ) 0. 들어가기 앞서 앞서 포스팅에선 자바스크립트 데이터 타입을 살펴 보았다. 여러 타입중 이번 포스팅에선 배열(Array) 에 대해 좀더 자세히 알아 보려 한다. 1. 배열 생성 방법 ▶ 1. 배열 리터럴 - 객체 리터럴은 중괄호({})를 이용하였지만, 배열 리터럴은 대괄호([])를 사용한다. - 리터럴(literal) : 리터럴은 직접 표현되는 값 그 자체를 의미한다. var testArray = ['god', 'dae', 'hee']; console.log(testArray[0]); // god console.log(testArray[1]); // dae cons.. 2020. 3. 13.
반응형