JavaScript
-
Object와 InstanceJava Script/기본 개념 정리 2020. 8. 8. 17:03
객체 object 자바스크립트의 기본 타입 프로퍼티와 메소드등 프로퍼티를 가질 수 있음. 아래 예시에서 OriginObject가 바로 객체. 껍데기라고 이해하면 됨 껍데기를 완성하는 구성요소는 프로퍼티와 메소드 인스턴스 instance 객체와 유사하지만, 객체는 일반적인 의미인 반면에 인스턴스는 현재 생성된 바로 그 객체를 의미한다. Object를 사용해서 Object를 생성하면 Object가 반환됨. 이때 반환된 Object를 인스턴스라고 함 // 생성자 함수를 사용 function OriginObject() { this.name = 'javascript' var obj = new OriginObject(); obj.name = 'jQuery'; console.log(obj..
-
Javascript Class(클래스), Prototype(프로토타입), Property(프로퍼티)Java Script/기본 개념 정리 2020. 8. 8. 16:14
Class(클래스) 자바스크립트에서 클래스란 생성자 함수를 의미함 함수가 특정 기능을 하는 구문(알고리즘, 로직)을 묶을 때 사용하는 문법이라면, 클래스는 이렇게 만들어진 수많은 변수와 함수 중 연관 있는 변수와 함수만을 선별해 포장하는 기술 즉, 연관있는 변수와 함수를 하나로 묶을 때 사용 객체 단위로 코드 그룹화 및 코드 재사용성을 사용하기 위함 일반 함수는 기능 단위의 코드 그룹화 ~> 기능 단위의 중복 코드 제거 및 재사용 Class는 자바의 Class와 같이 동작하는 것이 아니라, prototype을 이용한 기존의 방법을 유지하면서 문법만 지원하는 것(ES6 부터) 따라서, 기본적으로 Prototype에 대한 이해가 선행돼야함. 상속 프로토타입(prototype)을 통한 상속과 super()를 ..
-
자바스크립트 구성요소 ~ 함수는 값을 반환한다Java Script/MDN 정리 2020. 7. 26. 19:06
반환 값이란 let myText = 'The weather is cold' let newString = myText.replace('cold', 'warm') console.log(newString) // Should print "The weather is warm" // the replace() string function takes a string, // replaces one substring with another, and returns // a new string with the replacement made replace() 메소드의 작동 원리 'cold' substring을 찾는다. 해당 substring을 'warm'으..
-
자바스크립트 첫걸음 ~ 배열Java Script/MDN 정리 2020. 7. 23. 20:23
배열 배열 만들기var sequence = [1, 1, 2, 3, 5, 8, 13]; var random = ['tree', 795, [0, 1, 2]]; 위와 같이 배열 안에 모든 항목을 한번에 저장할 수 있다. (배열 안에 배열도 가능) 유용한 배열 Method 문자열을 배열로, 배열을 문자열로 변환하기 split() var myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle'; var myArray = myData.split(','); myArray; join() var myNewString = myArray.join(','); myNewString; 조인 안에 문자열 파라메터를 ..
-
JavaScript의 첫걸음 ~ 자바스크립트가 뭔가요?Java Script/MDN 정리 2020. 7. 22. 23:18
그래서, 진짜 어떤 일을 할 수 있나요? APIs(Application Programming Interfaces) 이미 만들어진 코드의 집합체, 개발자들이 만들기 어렵고 힘든 부분을 쉽게 구현하도록 하는 프로그램 Browser API 웹 브라우저에 설치된 API들로, 컴퓨터 환경구성으로 부터 데이터를 보이게 하고 복잡한 일들을 하게한다. DOM(Document Object Model) API 동적으로 페이지의 스타일을 정하는 등 HTML과 CSS를 알맞게 조정하는 역할 팝업창이나 컨텐츠들이 보여지는 것들 모두 DOM의 결과 Geolocation API 지리적인 정보를 검색하게 해준다. Google Maps가 어떻게 위치를 찾고 지도에 표시하는지 알 수 있게 한다. Canvas와 WebGL API 2D와 ..
-
4장) 변수와 스코프, 메모리Java Script/프론트앤드 개발자를 위한 자바스크립트 2020. 6. 26. 21:51
변수와 스코프, 메모리 JS는 느슨한 변수 타입 ~> 변수는 특정 시간 특정 값을 가리키는 문자 그대로 이름일 뿐 원시 값과 참조 값 원시 값 : 단순 데이터 (스택 메모리에 저장) 참조 값 : 여러 값으로 구성되는 객체를 가리킴(힙 메모리에 저장) 변수에 값을 할당 ~> JS 엔진이 원시 데이턴지 참조 데이턴지 판단 JS는 메모리 위치에 직접 접근하는 것을 허용 X ~> 객체를 조작할 때는 객체 자체가 아닌 객체에 대한 참조를 조작하는 것 동적 프로퍼티 참조 값을 다룰 때는 언제든 프로퍼티와 메서드를 추가/삭제 가능 var person = new Object(); person.name = "Zin0"; alert(person.name); // Zin0 var name = "Zin0"; name.age ..
-
프론트앤드 개발자를 위한 JS - 3장Java Script/프론트앤드 개발자를 위한 자바스크립트 2020. 5. 3. 13:00
3장. 언어의 기초 문법 대소문자 구분 식별자 - 변수, 함수, 프로퍼티, 매개변수의 이름. 첫 번째 문자는 반드시 글자나 밑줄(_), 달러기호($) 중 하나여야 한다. 다른 문자에는 글자나 밑줄, 달러 기호, 숫자를 자유롭게 이용할 수 있다. ECMAScript 식별자는 관습적으로 카멜 케이스로 쓴다. -> firstSecond, myCar, doSthImportant 와 같이 소문자로 쓰다가 단어 바뀔 때 대문자 주석 - C 언어 스타일을 따름, // 라인 주석 or /* 주석 블럭 */ cf. HTML 주석은 스트릭트 모드(엄격 모드) - 기존과는 다른 방식으로 JS를 파싱하고 실행하라는 지시, ECMAScript 3판의 문제 해결 및 안전하지 않은 동작에 에러를 반환함. 엄격하게 문법 검사를 하겠..
-
프론트엔드 개발자를 위한 JS - 2장Java Script/프론트앤드 개발자를 위한 자바스크립트 2020. 4. 24. 18:44
2장. HTML속의 자바스크립트 ● ▲ 코드는 위에서부터 차례로 순차해석, 함수 정의가 먼저 해석되어 인터프리터 환경 내부에 저장됨. "를 쓸 수 없음. "); } ▲ 문자열""는 script를 닫는 태그로 인식돼서 error 발생. 이러한 경우 "/" 를 앞에 붙여 이스케이프해서 사용. ▲ 코드 정상 작동 ○ 외부 JS 코드 (External Javascript) - 작성되어있는 js파일 불러옴. ※ Internal JS와 External JS를 동시에 사용하면, 브라우저는 Script 파일을 내려받아 실행하며 Internal 코드는 무시함. ○ defer와 async를 제외하고는 script 요소는 페이지에 나타난 순서대로 실행. ○ ○ defer를 이용해서 페이지 전체를 파싱한 후에 스크립트를 실행..