Study/Web (27) 썸네일형 리스트형 [JS] 바닐라 JS | #3.0~3.5) 오브젝트, 배열, 이벤트 #3.0: The Document Object JavaScript가 브라우저를 어떻게 움직이게 하는지 알아보자. HTML은 CSS와 JavaScript를 가져온다. JS를 사용하는 이유는 HTML과 상호작용하기 위해서이다. 즉, HTML의 요소들은 JS를 통해 변경하고, 읽을 수 있다는 것이다. document console에 document라고 입력하면 작성한 HTML을 가져올 수 있다. document는 사용자가 접근할 수 있는 HTML을 가리키는 객체로, 브라우저에 이미 존재하는 object다. HTML의 내용을 JS의 관점으로 보여준다. JS는 HTML에 접근하고 읽을 수 있게 설정되어 있다. document.title document.title 이라고 콘솔에 입력하면 html에서 title 태그.. [JS] 바닐라 JS | #2.7~2.16) 함수의 사용 & 조건문 #2.7: Functions part One () 함수를 실행시킨다. {} {} 안에 실행하고 싶은 것을 적는다. argument function을 실행하는 동안 어떤 정보를 function에게 보낸다. #2.8: Functions part two function안에 data 보내는 법: ()안에 인수 적는다. #2.9: Recap let -> 변경하고 싶은 변수에 const -> 변경하지 않을 변수에 semantic coding을 위해 var은 쓰지 말자. #2.0: Recap II console도 오브젝트의 일종이다. JS가 이미 사용자를 위한 오브젝트를 갖고 있는 것이다. #2.11: Returns return function을 실행할 때 function() 부분을 이것의 결과로 대체한다. func.. [JS] 드림코딩 | #6) 클래스와 오브젝트의 차이점 & 객체지향 언어 class와 object가 무엇인가요? class 안에는 속성(fields)(data), 행동(methods)가 들어있다. classs는 붕어빵을 찍어내는 틀이라고 생각하면 쉽다. class의 특성은 아래와 같다. template -> 기본 틀의 역할. 어떤 데이터가 들어올 수 있는지. declare once -> 한 번만 선언한다. no data in -> 안에 실제 데이터는 넣지 않는다. 이런 class를 이용해서 실제로 데이터를 넣어 만드는 것이 object이다. class를 이용해서 새로운 instance를 생성하면 object가 된다. object의 특성은 아래와 같다. instance of a class created many times -> 클래스를 이용해 굉장히 많은 오브젝트를 만들 수 있.. [JS] 바닐라 JS | #2.1~2.6) 여러가지 데이터 타입 & 배열 & 오브젝트 #2.1: Basic Data Types 1. 숫자 integer float 2. 문자 text string #2.2: Variables - camelCase:공백이 있으면 안 됨. 대문자로 띄어쓰기를 대체함. (cf. snake_case: 파이썬은 _이 관례) #2.3: Const and let JS에서 새로운 변수는 const와 let 두 가지로 만들 수 있다. 이 둘의 구분을 통해 코드를 읽고 개발자의 의미를 바로 파악할 수 있다. const를 default로 사용하자. var도 존재하지만 사용 금지!!! 1. Const - 바꿀 수 없다. 2. let - 바꿀 수 있다. #2.4: Booleans 3. Boolean true와 false가 있다. 예를 들어사용자가 로그인 했는가를 체크해야 할 때 .. [JS] 바닐라JS | #1.4~2.0) JavaScript의 쓰임 & HTML 문서와 연결 방법 # 1.4: Why JS? 기존에 넷스케이프사에서 제공하던 브라우저를 조금 더 interactive하게 이용하고 싶은 사용자들의 니즈가 있었다. 그래서 탄생한 언어가 JS다. 현재 광범위하게 사용되는 언어가 JS라 현실적으로 다른 언어는 사용 불가하다. 때문에 JS가 프론트엔드에 쓸 수 있는 유일한 프로그래밍 언어이다. * 백엔드는 여러가지 언어로 할 수 있지만, 프론트엔드는 JS만 사용한다. 자바스크립트는 모든 브라우저에 내장되어 있다. 따라서 설치가 필요없다. * 브라우저는 세 가지의 언어를 이해한다. HTML, CSS, JS # 1.5: Why JS II ◼️ three.js - 자바스크립트로 3D를 구현하게 해주는 라이브러리 - 비디오 게임도 제작 가능 ◼️ React Native - 프레임워크 .. [JS] 드림코딩 | #5) 함수의 선언과 표현 #5. ■ function declare - 하나의 함수는 한 가지의 일만 하게 만들어야 한다. - 이름은 doSomething, command, verb 특성을 띄게 정한다. - function은 object이다. 따라서 변수에 할당할 수도 있음 - JS는 함수에 자료형이 필요없으므로 TS 보다 파악이 어려움. - 따라서 JS보다 TS가 협업에 유리 * TypeScript 사이트 playground에서 TypeScript -> JS 변환 해 볼 수 있음 ■ Parameters - premitive는 메모리에 value가 전달됨 - object는 메모리에 reference로 전달됨. -> 함수 안에서 object의 값을 변경하게 되면 변경 사항이 그대로 메모리에 적용됨 ■ Default Parameter.. [JS] 드림코딩 | #4) 연산, 반복문(Operators) #4. operator 1. String concatenation 2. Numeric opeator(+,-,/,*) 3. Increment and decrement operators(++) 4. Assignment operators(할당) 5. Comparison Operators 6. Logical operators(||(or), &&(and), !(not)) - true or true or false 면 true로 판단됨 -> 복잡한 걸 뒤로 보내는 게 나음 7. Equality operators - ===: strict equality. 타입 검사. - null == undefined (O), null === undefined (X). 둘은 같은 걸로 간주 되지만 타입은 다름. 8. If opera.. [JS] 드림코딩 #3) 데이터타입, let VS. var, hoisting #3. ■ block scope VS. global scope block scope는 지역 변수 {}, global scope는 전역 변수 ■ let: 유일한 변수 선언 키워드 변수 선언 키워드로 var도 있지만 사용하지 말자. var는 선언을 bottom에서 top으로 끌어올려 준다. 하지만 var는 block scope도 없고 여러모로 불편한 점이 많다. ■ Const 변수는 Mutable(변경가능)하다. 상수인 constant는 변경이 불가능한 immutable한 데이터 타입이다. 상수는 변경이 불가능하므로 보안 상의 이유로 좋다. 정리하자면, 변수 선언할 때 두 가지가 있다. ∨ Mutable 타입의 let ∨ Immutable 타입의 const ■ Variable types 1. primitiv.. 이전 1 2 3 4 다음
