whatisthis?

💡 JSON이란? JavaScript Object Notation (JSON) 은 속성-값 쌍(attribute–value pairs / array data types (or any other serializable value)) 또는 "키-값 쌍"으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷. 인터넷에서 자료를 주고 받을 때 그 자료를 표현하는 방법으로 알려져 있음. 자료의 종류에 큰 제한은 없으며, 특히 컴퓨터 프로그램의 변수값을 표현하는 데 적합함. 비동기 브라우저/서버 통신 (AJAX)을 위해, 넓게는 XML(AJAX가 사용)을 대체하는 주요 데이터 포맷. ** 참고 ㅡ 이전에 배웠던 내용 中 console.dir - element를 JSO..

실행 컨텍스트 (Execution Context) 실행 컨텍스트(Execution Context)는 scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리이다. var name = 'zero'; // 전역변수 function wow(word) { // word는 parameter console.log(word + ' ' + name); // } function say () { // var name = 'nero'; // 지역변수 name 선언 console.log(name); // 'nero' wow('hello'); // console.log('hello zero') } say(); // nero, hello zero - Lexical..

자바스크립트에서 ECMAscript 5 이전에는 var로 선언한 변수로 데이터를 저장했었다. (ECMA5이후에는 const와 let이 등장하였다. 현재 var은 웬만해선 쓰지 X) var로 전역(global)변수를 만드는 것은 삼가야 한다! 그렇다면, 전역 변수란 무엇이며, 삼가야 하는 이유는 무엇일까? ** 전역변수 (global variable) 자바스크립트에서 가장 바깥 범위(window 객체)에 변수를 만드는 것. 함수 안에 포함되지 않음. 예제를 통해 살펴보자. var x = 'global'; function ex() { var x = 'local'; x = 'change'; } ex(); // x를 바꿔본다. alert(x); // 여전히 'global' 함수 ex 안의 x는 local 변수(..

Object 객체 - object 자체도 객체이다. (모든 객체의 최종 prototype임) - 객체의 prototype 확인 >> 이미 구현된 객체의 prototype을 확인하려면, __proto__를 사용. Math.__proto__; // Object { ... } 예를 들어 Math 객체의 prototype을 확인해보면 Object 객체가 나온다. 즉, 모든 객체의 prototype은 결국 Object 객체이다. ** 생성자로 만든 객체의 prototype의 prototype도 Object 객체가 됨. function Person(name) { this.name = name; } Person.prototype.sayHello = function() { console.log(this.name); }..

상속(inheritance) - 상속은 부모 생성자의 기능을 물려받으면서 새로운 기능도 추가하는 것을 의미. = 확장(extend) function Vehicle(name, speed) { // 1️⃣ Vehicle 생성자 this.name = name; this.speed = speed; } Vehicle.prototype.drive = function() { // 메서드 ㅡ 프로토타입에 생성 console.log(this.name + ' runs at ' + this.speed) }; const tico = new Vehicle('tico', 50); // Vehicle 생성자로 tico 객체 만듬 tico.drive(); // 'tico runs at 50' function Sedan(name, s..

prototype, __proto__와 constructor의 관계 prototype과 constructor는 부모자식 관계라고 생각하면 된다. Person.prototype.constructor === Person; 이고, Person.prototype === (Person생성자로 만들어진 객체).__proto__; 이기 때문에 (Person생성자로 만들어진 객체).__proto__.constructor === Person; 도 성립하게 된다. 모든 객체는 [[Prototype]]이라는 내부 슬롯(자바스크립트 엔진의 내부 로직)을 갖으며, 상속을 구현하는 프로토타입 객체를 가리킨다. [[Prototype]] 내부 슬롯에는 직접 접근이 불가하다. 이는 프로토타입 체인의 단방향을 지키기 위해서다. (만약 ..

객체 지향 프로그래밍(OOP) ex> let date = new Date(); typeof date; // object - 지난 시간 Date 객체를 new Date()로 생성한 것. Date는 분명 객체라고 했는데, new를 붙이고, 함수처럼 호출()을 했다. >> 생성자(constructor) 함수 📌 생성자 함수 - 객체를 생성하는 함수. - 자바스크립트에는 Class가 없어서, 생성자 함수가 그 역할을 대신함. function Person(name, gender) { this.name = name; this.gender = gender; this.sayHello = function() { alert(this.name + ' said "hello"'); } } 사람을 만드는 생성자 함수이다. 여기서..

1. Date const time = new Date(); //현재 날짜+시간 저장 const time = new Date(2000, 5, 10) // 2000년 6월 10일 0시 00분 00초 new와 객체를 함수처럼 사용한다. 특정 날짜를 저장하려면 new Date() 안에 년,월,일을 함수에 인수를 넣듯이 하면 된다. ❗ 여기서, 월(Month)의 경우에는 -1이 되므로 6월이면 5라고 해야한다. (즉, 1월 = 0) 📌 Date 관련 메서드 1) 날짜.getFullYear() 날짜.setFullYear(연도) - getYear과 setYear도 있지만, 2000년 이후를 표시하지 못해서 Full이 추가된 getFullYear과 setFullYear이 등장했다. 2) 날짜.getMonth() 날짜...

DOM(Document Object Model) - 브라우저가 HTML파일을 읽어서 화면에 띄워주는 과정 = Critical Rendering Path. >> 1) 브라우저가 HTML과 CSS를 파싱(parsing) ㅡ 렌더트리(Render Tree) 생성됨. 2) 브라우저가 렌더링(rendering)함. ** 자세한 내용은 추후 포스팅 예정. etc. 웹브라우저의 렌더링(Rendering) 과정 - DOM DOM은 무엇인가? DOM Node와 Element의 차이 여행자보험의 보장명과 보장가격을 가져오기 위해 웹크롤링을 해보았다. 사실 이 과정은 그냥, html parsing해주는 라이브러리를 사용해서 html에서 내가 원하 mywebproject.tistory...

Document 객체 - Window 객체(=전역객체)에 속해있음. - Document는 HTML에 관한 것을 담당. (=웹페이지) >> 대부분의 것이 태그(tag)를 선택하고 조작하는데 사용됨. - 요소 선택 >> 선택한 부분의 html 코드를 반환 1) document.getElementById(아이디) document.getElementById('id-name'); // ... ] 💡 name 속성 : form 컨트롤 요소의 값(value)를 서버로 전송하기 위한 속성. >> class / id / name 의 차이와 사용 예시는 아래 포스팅 참고 🔻 Html. class와 id, name의 차이 class vs. id vs. name REFERENCE id, name, class 속성에 대한 사용..