본문 바로가기

Dev.FrontEnd/JavaScript

 (41)
3-1. 자바스크립트의 함수(Function) / 함수의 역할과 함수 모델링 Chapter 3-1. 자바스크립트의 함수 / 역할, 모델링함수(Function)함수는 자바스크립트를 이해하는데 핵심이 되는 컴포넌트다. 자바스크립트의 함수와 메소드는 전혀 다른 개념이다. 자바스크립트 함수는 메소드 역할을 할 수 있지만 객체지향 프로그래밍의 메소드는 자바스크립트의 함수 역할을 할 수가 없다.code>1234function add(x, y) { var total = x + y; return total;}cs 함수의 역할 세 가지는 다음과 같다. 역할1. 호출 가능한 루틴으로서의 함수 실행코드를 갖고 있으면서도, 일반 객체처럼 멤버를 가질 수도 있다. 역할2. 값으로서의 함수(인자로 전달 가능, 변수에 할당 가능, 다른 함수의 반환값으로 사용가능) 함수를 변수에 담을 수 있다. 역할3. 다..
2. 자바스크립트 자료형 / 원시데이터형 Chapter 2. 자바스크립트의 자료형원시타입 리터럴(literal)표현이 있다. 소스 코드에서 고정된 값을 표현할 때 사용한다. 다른 언어의 원시 자료형과 비슷하지만, 자바스크립트는 모든 값을 객체처럼 다루므로 원시 자료형에도 프로퍼티와 메소드가 존재하는 것처럼 보인다. (null, undefined 제외) 숫자NumberNumber 객체를 이용하여 숫자를 나타낼 수 있다. Number 객체는 원시 타입의 숫자를 객체로 만들기 위한 래퍼(wrapper)다. (그리고 숫자 리터럴을 이용하여 나타낼 수 있다.) Infinity앞에서 본 최대 숫자를 벗어나는 숫자를 표현하기 위해 Infinity라는 값이 정의되어 있다. 0으로 나누면 Infinity가 반환된다. 최소값을 벗어나는 숫자를 표현하기 위해서 -..
1. 자바스크립트의 기본 개념, 프로그램 실행절차 / JavaScript as language Chapter 1. 자바스크립트의 기본 Concept, 프로그램 실행절차자바스크립트는 절차 지향적, 객체 지향적, 함수 지향적 특징을 모두 지원한다. 객체 지향 언어도 클래스 기반과 프로토타입 기반으로 나뉘게 되는데, 자바스크립트는 프로토타입 기반의 객체지향 프로그래밍을 지원한다.(ECMA2016이 발표되면서 클래스라는 개념이 생겨났지만 기본적으로 프로토타입 기반이다.)객체의 원형(프로토타입)을 이용해 객체를 만들고 상속도 프로토타입으로 한다. 자바스크립트에서 프로토타입을 정의할 때는 함수를 이용한다. Data type?Primitive Data type은 5가지!원시데이터타입으로 숫자, 문자열, 불린 그리고 null, undefined 5가지를 정의하고 있다. 그리고 자바스크립트에서는 모든 종류의 숫자..
JavaScript는 세상에서 제일 잘못 이해되고 있는 언어이다. / 자바스크립트란 어떤 언어인가? Javascript: 세상에서 제일 잘못 이해되고 있는 언어 http://javascript.crockford.com/javascript.html :번역 Douglas Crokford : www.crokford.com LiveScript, JScript, ECMAScript로 알려져 있는 Javascript는 세상에서 가장 유명한 언어중의 하나이다. 자바스크립트 인터프리터는 세상의 모든 퍼스널 컴퓨터에 설치되어 사용되고 있다. Javascript의 유명세는 WWW 스크립팅 언어의 막중한 책임을 맡고 있기 때문이다. 이런 유명세에도 불구하고, 오로지 몇몇만이 자바스크립트를 매우 좋은 동적 object-oriented 범용 목적의 프로그래밍 언어로 알고 있다. 이게 어떻게 비밀일 수 가 있는가? 왜 이 언어..
[아홉번째] JavaScript - Web Browser / Ajax , JSON Ajax(Asynchronous JavaScript and XML) 자바스크립트를 통해 내부적으로 통신할 수 있는 것.- 누가 : 사용자들이- 무엇을 : 지금 당장 필요로하지 않는 정보들을- 언제 : 나중에 필요로할 때- 어떻게 : 서버에서 가져와주는 기술 - 왜 : 그게 사용자 입장에서 효율적이니까 Asynchronous JavaScript and XMLXML은 중요하지 않다. 요즘엔 다른 데이터도 다 취급하기 때문에주로 JSON을 많이 사용.비동기적으로 서버와 통신을 하는 방식동기적인 것은 동시적인 것 JSON(JavaScript Object Notation)JavaScript 에서 객체를 만들 때 사용하는 표현식서버와 통신을 통해서 작업을 해야하는 상황에서 유용하고 광범위하게 사용하는 기술이다. j..
[여덟번쨰] JavaScript - Web Browser / 이벤트 II 이벤트키보드를 눌렀을 때 텍스트가 입력되는 것은 기본적으로 웹브라우저가 가지고 있는 API 라고 할 수 있다.input 태그를 불러왔을 때 submit 버튼을 누르면 데이터가 전송되는 것도a href 태그를 클릭하면 URL로 이동하는 것도기본 이벤트 동작들즉 API브라우저들의 구성요소들이 우리가 원하는 작업이 실행될 수 있도록 하는 것이 이벤트 - 동작 취소하기.checked 됬을 때 return false를 해주면 실행되지 않도록 해서동작의 취소 기능을 구현한다. 이벤트 타입- 폼 form form이라는 이벤트 안에 submit을 만든다.submit : 사용자가 입력한 폼의 정보들을 서버로 전송하는 명령change : 텍스트 입력창에 입력을 하면 그대로 입력blur : 포커스를 뺏을 때focus : 포..
[일곱번째] JavaScript - Web Browser / 이벤트 I 이벤트자바스크립트의 하이라이트! 이벤트란 말 그대로 사건. 웹 브라우저 상에서 일어나는 사건을 말한다.- 이벤트 타겟(event target) : 이벤트가 발생하는 태그- 이벤트 타입(event type) : onclick ...- 이벤트 핸들러 : 실행될 코드 이벤트 프로그래밍을 하기 위해서는 이벤트의 대상에 이벤트 핸들러를 등록해줘야 한다.크게 3가지 등록방법이 있다. 1. inline 방식태그안에 이벤트가 속성으로 직접 들어가 있다.태그에 직접 기술되어 있기 때문에 어떤 이벤트가 있는지 알기 쉽다.HTML의 정보로서의 목적에 어긋난다.또한 복잡한 코드를 삽입할 수 없다. 2. 프로퍼티 리스너이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록하는 방식event || window.event;even..
[여섯번째] JavaScript - Web Browser / 문서의 기하학적 특성 문서의 기하학적 특성 1. 요소들간의 관계여러 가지 Element들의 크기 , 위치 ,.getBoundingClientRect() 메서드 top : 최상단으로부터 문서의 시작점과의 거리left : 최좌측으로부터 문서의 시작점과의 거리height : 문서의 엘리먼트의 세로 길이width : 문서의 엘리먼트의 가로 길이 = padding + border (margin값을 포함하지 않는다.)right : 최좌측으로부터 문서의 끝나는 지점까지의 거리bottom : 최상단으로부터 문서의 끝나는 지점까지의 거리 ClientWidth ClientHeight : 테두리를 제외한 값 offsetParent : 위치 측정에 기준이 되는 객체를 출력 cf) CSS의 박스 모델을 되돌아보면 이해가 쉽다. 2. 뷰포트(View..

티스토리툴바