강의 정리 36

[자바스크립트] 7. 오브젝트

자바스크립트 기초 강의(ES5+) - 드림 코딩 by 엘리 강의 정리 입니다. 자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다. 오브젝트(Object) 오브젝트는 자바스스크립트의 데이터 타입중 하나입니다. 1. 오브젝트 생성 const obj1 = {}; // 'object literal' syntax const obj2 = new Object(); // 'object constructor' syntax function print(person) { console.log(person.name); console.log(person.age); } const ellie = { name: 'ellie', age: 4 }; print(ellie); // with JavaScrip..

Coding/JavaScript 2021.07.09

[자바스크립트] 6. 클래스와 오브젝트의 차이점

자바스크립트 기초 강의(ES5+) - 드림 코딩 by 엘리 강의 정리 입니다. 자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다. 클래스 클래스는 연관있는 데이터를 묶어놓는 컨테이너같은 역활을 합니다. 클래스에서도 안에서 볼 수 있는 변수와 밖에서만 볼 수 있는 변수를 나눠놓습니다. 이런것들을 캡슐화라고 합니다. 클래스를 이용해서 상속과 다형성이 일어날 수 있는데, 이 모든 것이 가능한 것은 객체지향이라고 합니다. - template - declare once - no data in - 붕어빵 만드는 기계 오브젝트 - 클래스로 실제 데이터를 넣어서 만드는 것 - instance of a class - created many times - data in - 팥 붕어빵, 크..

Coding/JavaScript 2021.07.08

[자바스크립트] 5. 함수의 선언과 표현

자바스크립트 기초 강의(ES5+) - 드림 코딩 by 엘리 강의 정리 입니다. 자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다. 함수 함수는 프로그래밍에서 중요한 역활을 합니다. 때로는 sub program이라고 불리기도 합니다. - 프로그램을 구성하는 기번 빌딩 블록 - 재사용이 가능함 - 한가지 일 또는 계산을 진행함 1. 함수 정의(Function declaration) // function name(param1, param2) { body... return; } // one function === one thing // naming: doSomething, command, verb // e.g. createCardAndPoint -> createCard, cre..

Coding/JavaScript 2021.07.08

[자바스크립트] 4. 코딩의 기본 operator, if, for loop

자바스크립트 기초 강의(ES5+) - 드림 코딩 by 엘리 강의 정리 입니다. 자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다. Operator 1. String concatenation(문자열 합치기) // 1. String concatenation console.log('my' + ' cat'); console.log('1' + 2); console.log(`string literals: 1+2=${1 + 2}`); - 앞서 말했듯 `` 백틱을 이용하면 좀 더 편하게 출력을 할 수 있습니다. 2. Numeric operators(숫자 연산) //2. Numeric operators console.log(1 + 1); // 더하기 console.log(1 - 1); ..

Coding/JavaScript 2021.07.07

[자바스크립트] 3. 데이터 타입

자바스크립트 기초 강의(ES5+) - 드림 코딩 by 엘리 강의 정리 입니다. 자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다. 프로그래밍에서 가장 중요한 것은? 입력 & 연산 & 출력 1. let let name = 'ellie'; console.log(name); name = 'hello'; console.log(name); let이라는 키워드를 이용해서 name을 만들면 포인터 형식으로 데이터를 가리킵니다. ellie에서 hello로 변경됨 블록 안에서 만들어진 변수는 블록 밖에서 접근할 수 없습니다. 블록 밖에서 만들어진 변수는 블록 안, 밖에서 접근할 수 있습니다. // 1. Use strict //added in ES5 //use this for Valia ..

Coding/JavaScript 2021.07.07

[자바스크립트] 2. 콘솔 출력, Script async 와 defer의 차이점

자바스크립트 기초 강의(ES5+) - 드림 코딩 by 엘리 강의 정리 입니다. 자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다. 1. Hello 콘솔 출력 main.js 작성 결과 출력 index.html 작성 Live Server 실행 및 확인 js파일을 head에 넣는 경우 - js 파일을 헤드에 넣는 경우 js가 큰 경우에는 느려질 수 있습니다. js파일을 body에 넣는 경우 - 사용자가 페이지를 보기 전에 fetching 과 실행 시간을 기다려야 합니다. js파일을 head + async를 설정하는 경우 - 다운로드 받는 시간을 절약할 수 있습니다. - But, 조작 시점이 HTML이 정의되어 있지 않으면 위험합니다. js파일을 head + async를 설정하..

Coding/JavaScript 2021.07.07