JavaScript

이렇게 형 변환이 되어 있다 ===를 써주면 false 가 나오고 또 ==를 써주면 true가 나온다 동등연산자를 쓰면 의도 하지 않는 값이 나올 수 있으니, 일치연산자를 쓰는 것을 권장함 일치연산자는 값이 다르면 무조건 false가 나오기 때문에 안전하게 사용

산술, 할당 , 증감 연산자 산술 산술연산자는 보기보다 간단하다. 값은 다음과 같다. 할당 중간에 보면 a = a + 2가 나외있는데 let 말고 const를 사용하면 재할당이 불가능 하므로 let 이라는 것을 써야 재할당이 가능하다. +뿐만 아니라 -, * 등

이런식으로 간단하게 만들어 보았는데 HTML,CSS에 대한 이해도는 얼추 알 거 같은데, JS 부분은 잘 모르겠어서 블로그를 적어 기억해 두려고 한다.let은 명령문이고, 재할당이 가능하다.document는 HTML을 접근 하고자 할 때 꼭 써야한다.getElement

const string 1~3안에 '', "",, 가 있다. '',""는 선택적으로 사용하고, 기호는 데이터를 주어야한다 ${}여기안에 데이터를 주고 console.log(sting3) 으로 출력하면 Hello Hi?! 가 출력된다.NAN은 부정으로 많이 해석 된다.

참조형 Array new가 들어간 함수는 생성사 함수라고 한다. 혹은 자바스크립트 클래스 라고 불림 이 []괄호가 있는 것은 배열 리터럴방식이라고 한다. fruits.length는 지금 과일이 3개 사과,바나나,체리 이렇게 3개의 과일이 있으니, length는

형은 type 자바스크립트의 여러 데이터를 의미. 문자, 숫자, 함수, 객체, 배열 을 전부다 형이라고 한다. 따라서 형 변환은 이러한 것들이 다 변할 수 있다 라는 의미를 가지고 있다.a는 숫자 1을 주고 b는 문자 1 을 주고 console.log(a === b)

if 조건문 안에 true를 주면 입력 값엔 참! 이라는 결과 값이 나오게 될 것이고,이렇게 if 조건문안에 fasle를 넣어주면 입력값엔 아무것도 입력되지 않을 것이다.123 은 숫자데이터니까 참이다이것은 문자 0 으로 나타낸 것으로 참! 이라는 입력 값이 나올

typeof 에 문자열을 주고 일치 연산자를 넣고 또 다시 문자열 string을 넣으면결과 값은 true가 나오는 걸 확인할 수 있다.지금 4개의 typeof를 보면 전부다 true로 불 수 있고, 실제 입력 값엔 true가 나오는 걸 확인할 수 있다.하지만

연산자에서 +, -, \*, /, % 는 연산자 이고, 숫자로 되어있는 값들은 피연산자라고 한다. 연산자는 기호이고, 피연산자는 데이터 이다.num % 2 === 0 은 나머지가 0이기에 num은 짝수여야 하는데, console.log(isEven(3))을 출력하면

이렇게 부정연산자는 console.log(true)를 입력하면 당연하게도true라는 값이 출력이 될 것이다. 하지만 console.log(!true)는 !는 부정을 의미해서, !true를 쓰면 출력 값엔 false가 출력이 될 것이다. 이것이 부정연산자 이다.

and연산자는 &&로 활용하며, 모두가 참일 때에만 값이 출력이 되는 것이다.a는 true, b는 false이기 때문에, &&연산자에선 둘 다 참이 아니기 때문에,아무것도 출력이 되지 않는다. b를 true로 바꾸어 주면, 출력 값엔 모두가 참! 이 출력이 된다.

OR 연산자는 왼쪽에서 부터 읽는다고 했다. 그래서 왼쪽 부터 거짓이면 출력이 되지 않고, 참인 경우에만 출력이 되는 것이다. 따라서 OR연산자를 사용했을 땐 7 이라는 값이 출력이 되는 것이다.Nullish은 왼쪽부터 읽히는 것은 동일한데

전개 연산자는 ... 을 사용하는 것이며,...a를 사용하지 않고, a만 넣고 출력을 한다면, 1, 2, 3이 출력이 된다, 하지만 ...을 사용하면 아래 코드와 똑같이 전개해서 그냥 1, 2, 3만이 출력이 된다.concat 과 전개 연산자로 같은 값 만들어

const 키워드로 하나씩 지정을 해주고, 출력을 하면 1, 2, 3이 출력이 된다. 하지만, 3줄이나 써야 하기에, 불편함이나 코드가 깨끗해 보이지 않을 수 있다.그래서 구조분해할당으로이런 코드를 쓸 수 있다.

객체 구조로 {}에서 아무것고 적지 않고 console.logㅇ에서 user.name을 출력하면 undefined가 뜬다. 하지만. const user = null 이라고 지정하고 출력을 하면 오류가 뜬다. 이유는 null 을 지정했을 땐 애당초 점 표기법을

1번은 조건에다 참과 거짓을 놓고 조건문 안에 참이면 출력이 되고, 거짓이면 안 뜨는 구조로 만드는 것이고,2번은 거짓에도 출력할 내용이 있다면 else로 통해 첫 번째 조건이 참이면 참 조건이 출력되고, 거짓이면 else로 통해

For 반복문 For 반복문이다. 우선 for을 선언하고 () 초기화, 조건, 증감을 선언하는 것이다. 초기화, 조건에는 끝나면 ;을 붙혀주어야한다. 그래서 초기화는 예시로 let i =0; 이렇게 선언해 주고 조건에는 i < 10;을 선언하고 증감부분

while 반복문 while 반복문은 조건이 계속 참일 때 계속 반복하는 것이다. 다라서 거짓이 있어야 반복문이 끝나는 것이 while while 반복문 예제 우선 let 이라는 재할당 가능한 키워드를 0 으로 지정해 주고 while문으로 n <

호이스팅은 지금 코드를 보면 아래 함수는 함수를 선언한 것이니까 아래에 써도 결국은 위로 올라가져서 읽힌다는 뜻이다. 선언 문만 가능하다.이렇게 const로 hello를 지정해 주고, 위에서 hello()를 실행 시키면 오류가 난다. 위에서 부터 읽히니까

함수 선언문으로 console.log에 hello()를 선언 해 주고 또 다른 wow!를 console.log에 지정을 해 주면 출력창엔 아무것도 출력이 안되는 걸 볼 수 있다. 이유는 return문도 종료하는 선언이기 때문이다.또 이렇게 return키워드에

매개변수로 a, b를 지정해 두었다. 그리고 리턴 키워드의 데이터로 a + b를 선언하고 console.log에 1, 2 를 지정했다 그럼 당연히 3이라는 값이 출력이 될 것이다. 그리고 두번째에는 7 하나만 있다. 그래서 b데이터는

선언 함수와, 표현식 함수와, 화살표 함수 방식을 적어 보았다. 화살표 함수는 굳이function을 적지 않아도 되는 장점이 있다고 생각함. 선언 함수는 이렇게 표현을 해서 총 3줄이 나오는데, 화살표 함수는 딱 1줄의 코드로 나와있는 걸 확인할 수 있다.

()()로 즉시 실행 함수를 선언할 수 있다. ()()여기서 첫 번째 소괄호에 함수를 넣어주면 되는 것이다. 그리고 double()엔 ;을 꼭 지정해 주어야 한다. 지정을 안 해주면 같이 읽히기 때문에 오류가 발생할 수 있다.대부분은 소괄호 ()()

이렇게 콜백 함수를 지정하는 것이다. 원래 출력 값에 출력을 하려면a(), b()를 출력을 해야한다. 하지만 callback으로 a(b)로 출력을 할 수 있는 것이다. 그래서 console.log 뒤에 callback함수를 지정하면 출력 값엔A, B가 출력이 된다

우선 재귀는 잘못사용했다간, 무한 반복이 될 수 있어서, 필요에 따라서 써야한다.이렇게 i로 0을 지정해주고 i++로 1씩 증가를 주고, 그리고 if 조건문에 i &lt; 4로 지정을 해주고, a()를 출력하면 A가 4번 찍히는 걸 볼 수 있다.

이 코드를 보면 setTimeout을 사용해서 2초에 hello가 출력 되도록 지정을 해 두었다. 그래서 html에 있는 h1코드를 작성을 해 놓았다. 그래서 h1원에 있는 화면을 클릭하면 Clear! 이라는 값이 나오게 지정을 해 두었고 클릭을 하지 않으면

현재 코드를 보면 user가 아닌 this로 쓰이고 있다. 현재 this라는 키워드는 사진에 보면 getpullName에 해당하는 객체 데이터 라는 것이다.그래서 firstName, lastName, age를 모두 this로 응용할 수 있는 것이다.

prototype은 new 키워드를 통해서 만드는 생성자 함수에서 반환된 결과.이것을 인스턴스라고 한다. 이젠 new 로 통해서 생성자 함수로 반환된 인스턴스를 활용한다..?getFullName으로 이름들을 선언 해준다.

우선 이런식으로 prototype으로 선언한 일반 함수로 만들어 주었다. 저번 시간에도 배운 내용이라 몇 번 더 반복하고 복습하면 이해를 할 거 같다.그래서 getFullName으로 console.log에 출력을 해 주면 저번시간에 출력했던 값과 같은 값이 나온다.

원래는 getFullName 으로 지정을 해 주었는데, 이젠 get을 띄우고, FullName을 소문자 f로 바꾸어 준다.그럼 이제 fullName은 값을 얻어내는 용도의 함수가 되는 것이고,이것이 바로 Getter이라고 한다.

이렇게 보이는 메소드는 우선 prototype이 들어있는 메소드는 prototype메소드라 부를 수 있고, Array로 시작하고 prototype이 들어 있지 않는 메소드는,정적 메소드라고 부를 수 있다라고 한다.static 으로 정적 메소드를 만들어 보았다.

class 하나가 정의 되어 있고, Vehicle로 지정되있다.그래서 constructor로 기본 내용이 작성이 되어있고,acceleration이라는 매게변수를 받아서 사용하는 것이다. 만약에acceleration에 아무런 값도 들어가지 않으면

이렇게 instanceof는 인스턴스 인지를 확인 시켜주는 함수인 거 같다. 그래서 a instanceof A는 true가 맞고 b, c는 상속되지 않기 때문에,flase가 출력이 되는 것이다.그리고 b는 a,b는 상속이 되니까

length는 문자의 숫자를 반환하는 것이다. str이라는 변수의 이름에 Hello wlord!라는 문자열이 되어있다. 이 것의 숫자로 표현 즉 숫자의 길이를 표현 하게 해 주는 것은 length이다. includes는 주어진 문자열에 포함이 되어있는지를 확인해

str을 Hello, Hello?! 로 지정을 해두었다. 그래서 첫 번째 console.log엔 Hello, Hi로 교체를 한다. 그래서 출력 값엔 옆에 주석으로 되어 있는 값으로 출력이 되는 것이고

이렇게 3.14로만 출력을 하고 싶다. 그럴 때 소수점을 14 빼고는 다 버리고 싶다는 것이다. 그럴 때 toFixed를 사용해서 2 라고 넣으면 14 두개만이 빼고는 다 제거가 되는 역할을 해 준다.

abs는 절대 값을 반환하는 것이기 때문에, -마이너스도 제거하하고 그냥 숫자만을 출력하는 역할을 한다올림 처리로 정수로 반환한다. 소수점 자리는 다 제거하고, 4.14~를 올림해서 5로 출력이 된다.floor은 내림해서 출력이 되는 역할을 한다.

date로 이용해서 타임스템프로 한국표준시를 출력해 보았다.이렇게 d1으로 이름을 만들어 내가 직접 지정을 해도 잘 출력이 되는 걸 확인할 수 있다.이렇게 d2로 문자열로 똑같이 대입을 하고 출력을 해도 값은 똑같다.

이렇게 length는 숫자 즉 지금 a,b,c가 3개 있으니까, length 숫자로 길이를 말 하는 것이다.at은 대상 배열을 인덱싱하고, 음수 - 면 뒤에서 부터 인덱싱한다.그래서 console.log로 표현을 하면, 0, at(0)과의 값은 똑같은 것이다.

지금 보는 코드는 find를 예시를 든 것이다. 이렇게 arr에 5,90,130,12,44라는 값을 지정하고, find를 사용해 콜백함수로 item > 10이렇게 조건을 두고 실행을 하면 10보다 큰 수들은 90,130,12,44가 있다.

join으로 구분자로 연결해서 ', ' 출력하면 주석으로 되어있는 코드로 출력이 된다. ,쉼표와, 띄어쓰기로 구분이된다. 그리고 '/'는 띄어쓰기는 아닌데,/기호로 출력이 되는 것을 볼 수 있다.

reverse는 말 그래도 뒤집는 역할을 한다. 예제를 보면 arr에A,B,C 가 있다. 이걸 reverse를 하면 뒤집어서 결과 값이 출력이 된다.shift는 첫 번째 요소를 제거한다. 그래서 arr에서 a,b,c가 있다.

Object.assign는 하나이상의 출처객체, 그리고 대상객체로 복사하고 반환하는 역할을 한다. 첫 번째 console.log는 a: 1, b: 2라는 값이 출력이 되고,두 번째는 b가 가장 나중에 출력되는 것이 생기며 기존 것은 없어진다. c도 마찬가지 이다.

JSON은 데이터 전달을 위한 표준 포맷이고,문자, 숫자, 불린 null, 객체, 배열만 사용이 가능하다, 그리고문자는 큰 따옴표만 사용이 가능하다. 후행 쉼표는 사용이 불가하다. 그리고.json 확장자를 사용 가능하다.

가져오기와 내보내기를 활용해 보았다. 우선 main.js로 import로 사용한 가져오기를 사용하고, 그리고 module.js로 내보내기를 사용했다.default 123이라는 키워드가 보일 것이다. 이것은 default는 한 번만 사용이 가능하다.

이렇게 필요할 때만 가져오는 것은 안된다는 것이다. 무조건 최 상단에서만이 가능하다.import 함수는 import에 ('경로').then을 사용하는 것이다.

처음 console.log은 동기, 두 번째는 비동기이다. 세 번째도 마찬가지로 동기가 될것이다.그래서 순차적으로 코드실행이 되지 않는 것이다.지금 이렇게 두 개의 console.log에 출력을 했다. 근데 처음은 비동기이다.

지금 코드를 작성한 것은 동기형태로 콜백을 써 가면서 작성했다. 그러면서 이 부분이 점점 들어가는 것이 보일 것이다. 이것이 콜백지옥이라고 했다.개미지옥처럼 안 쪽으로 계속 들어가면서 코드가 쓰이기 때문에 콜백지옥이라 불린다.

Promise로 활용한 콜백 함수를 만들어 보았다.처음엔 Promise자리에 원랜 callback 이라는 함수가 들어가서, 출력이 되었다.하지만 이번엔 Promise을 넣어서 출력을 해 보았다.

이렇게 Await를 사용할 땐 꼭 async가 있어야 한다. 이렇게 Async Await로 만들어 보았다. Await는 무조건 Async가 있어야 한다.솔직히 promise보다 Async Await이게 더 이해가 편하고, 사용하기에 좋을 거 같다는 생각이 든다.

이렇게 promise로 Resolve, Reject를 활용해 보았다. 그래서 return으로 new키워드를 주고 Resolve, Reject를 넣는 것이다. 그래서 if 조건문안에는 Resolve를 index + 1엔 Reject를 넣어주고 delatAdd를 주고

then으로 만든 코드이다. 현재 getMovies에 1을 넣어서 catch문이 실행이 되는 것을 확인이 가능하다.업로드중..로 만든 것이다.내용은 Resolve, Reject 그리고 에러 핸들링 1과 같은 문법이다. 나중에 다시 보고 수정할 거 수정을 해야겠다.

forEach로 영화 사이트 출력을 해 보았다. forEach로 출력이 가능하지만,출력장엔 forzen, avengers, avatar 이렇게 순차적으로 출력이 되어야하는데, forEach는 순차적으로 출력이 되지 않는다.

DOM에 대해선 HTML 문서를 객체로 표현한 것으로, JS에서 HTML을 제어할 수 있게 되는 것이다. 그래서 밑에 예제에서 출력을하면, HTML에 h1태그로 Hello World를 작성 했다. 그리고 JS에서 출력을 해도 콘솔창에 똑같이 쓰여있다.

getElementById은 아이디를 찾는 요소이기 때문에, child2에서 그래서 HTML 문서를 보면,이렇게 id의 값인 child2가 있다. 그래서 출력 값엔이러 한 값이 출력이 되는 것이다.

document.createElement()는 메모리에만 존재하는 새로운 HTML 요소를 생성해 반환하는 것이다. 즉 실제 HTML에는 작동하지 않는 것이다. 이렇게 E.prepend() / E.append() 로 HTML에 실제로 삽입 하는 것이다.

E.daraset는 속성 값을 얻거나 지정하는 것이다. 그래서 const로 3개가 있다. .child가 있고 문자열로 된 Hello World!가 있고, obj로 1, 2가 있다. 그래서, 출력을 하고, 출력 값을 보면이러한 값들이 출력이 된다.

window.innerWidth / window.innerHeight는 그때 그때 내부의 가로너비와 세로너비를 바로바로 알수 있는 것이다.현재 수평과 수직 스크롤 위치를 얻는 것이다.window.scrollTO / window.scrollTo()

이렇게 .addEventListener()를 넣었다. .addEventListener()는 대상에 이벤트 청취를 등록하는것이다. 또, 대상에 지정한 이벤트가 발생했을 때 지정한 함수가 호출되는 것이다.그래서 parent를 클릭 하면 parent! 라고 출력이 되고

이벤트 객체는 대상에서 발생한 이벤트 정보를 담고 있는 것이다. 그리고 input은 addEventListener로 keydown을 추가 했다. 그리고 event를 주어서 출력을 하면,이런 식으로 출력이 된다.

스크롤 휠 스크롤를 동작을 방비하려면, event로 콜백 안에서 .prevrntDefault를 사용해 주면 스크롤을 할 때 마다 wheel이 계속 콘솔창에 출력이 된다.a태그도 마찬가지로 a태그를 누르면 블로그를 갈 수 있도록 해 두었다. 하지만

stopPropagation 이벤트 전파(버블)정지. a태그를 눌러도 싹 다 출력이 되는데, event.stopPropagation을 child부분에 입력하면, window, body, parent는 출력이 되지 않고,

Once는 한 번만 출력을 할 수 있게 하는 것이다. 그래서 parent 안에 child도 있고, a도 있다. 그 중에 아무거나 하나 클릭을 하고, 또 클릭을 했을 땐 출력이 되지 않는 것이다.passive는 동작을 좀더 부드럽게 하는 것이다.

이벤트를 위임하는 것이다. 모든 대상 요소에 이벤트를 핸들링을 해야하고 모든 대상 요소에 이벤트를 등록하는 거는 Node로 가기 때문에, forEach문을 사용해서 모든 대상 요소에 이벤트를 등록할 수 있는 것이다.

click은 EventList로 toggle로 설정해 주고 출력하면 클릭했을 때 변화가 일어난다.더블 클릭하면 변화가 일어나는 현상을 가진다.이렇게 mousedown, mousedown는 클릭을 하고 있을 땐 변화가 생기지만

keydown, keyup은 keydown은 키를 누를 때 계속 입력이 되고, keyup은 키를 땔 때 입력이 되는 것이다.===를 사용해서 Enter로 주면 키를 누르고 엔터를 눌러야 입력이 된다. 그래서 isComposing은 입력을 완료하거나,

이렇게 포커스 이벤트를 활용해 보았다.focus는 add로 active를 추가해주고, 반대로 blur는 remove로 제거를 해주는 것이다. 그래서 html구조를 보면 focus 이벤트를 사용했을 때, form요소가 추가되고, blur이벤트가

console에 메시지나 객체를 출력하는 것이다. 콘솔에 메소드 호출의 누적 횟수를 출력히거나, 초기화 된다.a가 처음 실행 됐으니

쿠키는 도메인 단위로 저장을 한다. 그리고 쿠키를 적용시킬 사에는 날짜, 타이머를 설정 해 주는 것이 좋다.영구 저장 가능하고, 또 setItem을 쓸 땐 console.log에 getItem을 써주는 것이다.