본문 바로가기

Front-End: Web

(163)
자바스크립트와 웹 애플리케이션 개발 자바스크립트는 클라이언트 사이드에서 웹 애플뢰케이션을 개발하는데 많은 도움을 주는 언어이다. 클라이언트 사이드에서 자바스크립트는 주로 HTML, CSS와 결합하여 Ajax라는 기술을 통해 동적인 웹 페이지를 만드는데 사용된다. HTML과 CSS HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만드는 방법을 제공한다. 또한 웹 페이지 콘텐츠 안의 에 둘러싸인 태그로 구성된다. HTML을 중심으로 자바스크립트 코드와 CSS코드를 불러온다. Ajax Asynchronous JavaScript and XML. 즉, 클라이언트 측에서 비동기 웹 애플리케이션을 개발할 수 있는 웹 개발 기술이다. 이를 사용하면 웹 애플리케이션 ..
클로져(Closure) 자바스크립트사 가진 특징이자 Node.js가 높은 효율성을 가지게 해주는 근간. 유효 범위 체인 함수 단위의 범위(Function Scope). 전역 변수(a)는 함수 안이나 어느 곳에서든지 사용할 수 있지만, 함수 안에서 선언한 변수(b)는 함수 블록 밖에서 사용할 수 없다. 클로져를 이용한 체인 깨기 클로져? 자신의 범위 밖에 있는 변수에도 접근할 수 있는 함수 위 그림에서 함수 N()는 상위에 있는 변수 a와 b를 사용할 수 있지만, 함수 F()는 함수N()에 있는 변수를 참조할 수 없다. 클로져는 이러한 문제를 해결할 수 있다. function f() { var b = "b"; return function() { return b; } } 함수 f()에 선언된 b는 함수 밖에서 사용될 수 없다. 하..
내장형 객체 Built in Object. Object, Number, Array, String, Boolean, Function RegExp : 정규식을 위한 객체 Math : 수학과 관련된 각종 값과 메서드를 내장한 객체 Date : 날짜와 시간에 관련된 메서드를 가진 객체 Error : 자바스크립트에서 발생하는 에러를 처리하기 위한 객체
자바스크립트에서의 객체: Constructor 컨스트럭터 함수 자바스크립트에서 객체를 생성하는 방법 중 하나. function SoccerPlayer() { this.position = "Forward"; } var VanPersie = new SoccerPlayer(); VanPersie.position;//Forward 이의 장점은 새로운 객체를 만들 때 초깃값을 전달하여 생성할 수 있다. function SoccerPlayer(name, position) { this.name = name; this.position = position; this.whatIsYourName = function() { return "My name is " + this.name; }; this.whatIsYourPosition = function() { return ..
객체지향 자바스크립트 자바스크립트는 객체지향(OOP: Object Oriented Programming) 언어이다. (코틀린도 이에 해당) 객체지향이란? 클래스(Class)와 객체(Object/Instance) = 메서드(Method) + 속성(Property) 캡슐화, 집합, 재사용, 상속, 변형 객체(Object/Instance) 어떤 것. 예를 들어 축구선수를 하나의 존재를 객체로 생각해보자. - 속성(Property): 객체의 특성. (ex)이름, 나이, 키, 몸무게, ... - 메서드(Method): 대상의 동작. (ex)드리블, 슛, 패스, 태클, ... var park_ji_sung = { name: "Park Ji Sung",//method: properties age: 31, height: 178, weigh..
자바스크립트의 기초 기본 문법 ;로 문장이 종료되어야 한다. 변수 이름의 시작은 항상 알파벳이나 _여야 한다. 대, 소문자를 구별한다. *예약어는 변수 이름으로 사용될 수 없다. {중괄호}를 이용해 구역을 나눈다. C/C++과 같은 구조의 조건문과 반복문을 가진다. *예약어: break, case, catch, continue, default, delete, do, else, false, finally, for, function, if, in, instanceof, new, null, return, switch, this, throw, true, try, typeof, var, void, while, with 연산자 조건 연산자: (조건)? A:B / 조건이 참일 경우 A, 거짓일 때 b를 수행함 ... 데이터 타입 Str..
JavaScript의 특징 1. 동적 형변환값에 따라 변수의 형변환이 자동으로 이루어진다.var i = 1;var ch = "a";console.log(i + ch); // 1ach = 1;console.log(i + ch); // 2 2. 프로토타입 기반 객체지향(POO)Prototypal Object-Oriented. 즉, 객체를 생성할 때 클래스로부터 그 내용을 상속받아서 객체를 만드는 것이 아니라, 객체로부터 그 특성을 복제하여 새로운 객체를 생성하기 때문에 런타임 중에서도 객체의 속성과 값을 추가하거나 변경하고 삭제까지 가능하다.var person = { name: "David Ki", age: 24};personObject age: 24 name: "David Ki" __p..
HTTP HTTP - HyperText Transfer Protocol 웹 브라우저와 웹 서버 사이 주고 받는 메시지를 직접 보자. 현재 페이지에서 '오른쪽 마우스>검사>Network'를 들어가면 브라우저와 서버 사이 데이터를 주고 받는 모습을 볼 수 있다. 위는 html파일이다. 이를 클릭하면 웹 브라우저가 요청하고 웹 서버가 응답한 자세한 내용들을 볼 수 있다. 여기서 "Request Headers"부분이 웹 브라우저가 웹 서버에게 요청할 때 작성한 요청서이다. 우리가 주소만 입력하면 웹 브라우저가 자동으로 만들어서 웹 서버에게 전달한다. 그럼 웹 서버는 요청서에 따른 정보를 만들어 "Response Headers"를 통해 웹 브라우저에게 전달한다. - User-Agent : 웹 브라우저이다. 즉, 요청을 할..

반응형