JS 기초

📝 자바스트립트는 HTML 조작을 위해 사용합니다.

UI만드는 법칙

함수는

파라미터

getElementsByClassName() 어떤 요소를 찾고 변경할 때 id로 찾는 방법 외에도 class명으로 찾을 수도 있습니다. 이러면 첫 태그 내용이 안녕으로 바뀝니다. [0] 이렇게 순서를 넣는 이유는 getElementsByClassName 셀렉터는 일치하는 class가 들어있는 모든 html 요소를 찾아주기 때문입니다. 그래서 그 ...

classList class명을 원하는 요소에 추가 셀렉터로찾은요소.classList.add(’클래스명’) class명을 원하는 요소에서 제거 셀렉터로찾은요소.classList.remove(’클래스명’) .classList.toggle() 클래스명이 있으면 제거하고 없으면 붙여준다. querySelector querySelector() 안에...

제이쿼리

A상태 → B상태 와 같이 일방향으로 상태가 변하는 애니메이션

제어문

제어문

<input> 태그에서 발생하는 이벤트들이 있습니다.input 과 change 이벤트인데 <input> 안에 뭔가 입력할 때 발생합니다.<input>에 입력된 값이 변경될 때 input 이벤트가 발생.입력된 값이 변경되고 커서를 다른 곳에 찍으면 ch

Dark Mode 버튼을 1회 누르면 안의 글씨가 Light로 바뀌고 2회 누르면 다시 Dark 3회 누르면 다시 Light 4회 누르면 다시 Dark … 변수 자료를 잠깐 저장해야 할 때 사용합니다. var 변수명 = 값; 이제 나이, 이름 이라고 치면 각각 20, ‘kim’이 나옵니다. 문자, 숫자 말고도 거의 모든 값을 넣을 수 있습...

선언, 할당, 범위 선언, 할당 선언 따로 할당 따로 가능합니다. 이미 있는 변수도 재선언이 가능합니다. 이미 들어있는 값을 재할당 가능합니다. 범위 변수는 사용 가능한 범위가 있습니다. 함수 안에서 변수를 만들었을 경우 함수 안에서만 사용 가능합니다. 반대로 함수 바깥에서 만들어진 변수는 함수 안에서 사용이 가능합니다. var / let / ...

캐러셀이란?슬라이드 되는 UI들을 캐러셀이라고 합니다.

캐러셀 버튼 만들기

return 함수 안에서 return 이라는 문법이 사용 가능하다. 반환 함수() 실행 시, 123을 출력하게 됩니다. 함수의 종료 함수 안의 코드를 한줄한줄 실행해 주는데 return을 만나면 함수가 바로 종료되 return 밑의 코드는 실행이 되지 않습니다. 소수점 1.4가 출력 될 것 같지만 예상과는 다른 답이 나온다. 컴퓨터는 2진법으...

‘scroll’ event 전체 페이지에 scroll 이벤트를 달면 스크롤할 때 마다 원하는 코드를 실행 가능하다. window.scrollY window.scrollY 사용하면 현재 페이지를 얼마나 위에서 부터 스크롤 했는지 px단위로 알려준다. 반대로 scrollX는 가로로 얼마나 스크롤 했는지 얄려준다. window.scrollTo win...

각각의 버튼을 클릭 시, 해당 하는 컨텐츠가 보여야 한다.보통 버튼 3개를 한 번에 개발 하려고 해서 어려움을 겪는다.그러기 때문에 가장 간단하고 쉬운거 하나부터 만드는 습관을 갖자.버튼0 을 누를 경우버튼0에 orange 클래스명 부착박스0에 클래스명 부착이렇게 가

반복되는 셀렉터 이전 챕터의 기능 구현 중, $('.tab-button') 와 $('.tab-button') 같이 비슷한 셀렉터가 매우 많이 등장한다. 셀렉터문법은 기본적으로 작동시간이 오래걸린다. 셀렉터를 하나 쓸 때 마다 html을 읽고 찾아야 해서 올래 걸리는 것인데 html이 길고 복잡할 수록 오래 걸린다. 그래서 반복적으로 등장하면 변수에...

모달창 로그인 버튼을 누르면 모달창이 나오게 되는 코드이다. 모달창을 오픈할 때, ‘show-modal’ 클래스명을 넣어서 오픈했다면 검은 배경을 눌렀을 때, 모달이 닫히게 된다. 근데 이상한 점이 있다. 검은 배경 뿐만 아니라 흰 배경, input, 글자 등 모달창 내부의 어떤걸 눌러도 모달창이 닫힌다. 이벤트 버블링 어떤 HTML 태그에 이벤...

함수로 축약 하기 반복문을 사용해서 탭 기능을 만드는 코드입니다. 재사용이 용이하고 가독성을 높이기 위해 함수를 사용해 축약을 할 수가 있습니다. 이벤트리스너 줄이기 위 코드는 탭을 만들 때 3개의 버튼 각각에 이벤트리스너를 부착 했는데 버튼 3개의 부모인 `` 에 이벤트리스너를 달아도 이벤트버블링 현상으로 탭기능이 가능하다. 이벤트리스너를 줄려...

여러 데이터들을 변수에 저장해야 한다면, 일일히 변수에 저장해도 되지만 자료가 수십개면 변수도 그만큼 늘어 나게 된다. 이럴 때 한 변수에 여러개의 자료를 저장하기 위한게 배열 자료형이다. Array자료형 여러가지 자료를 한 곳에 저장하고 싶을 때 사용하는 자료형이다. 대괄호를 열고 자료를 콤마로 구분해서 집어 넣으면 여러 자료를 엑셀 처럼 관...

는 과 같다. 사용자가 고를 수 있는 선택지를 드랍다운 메뉴로 제공하는 . 선택지는 으로 정할수 있다. 태그도 선택 시, input, change 이벤트가 발생한다. .value로 사용자가 입력한 값을 가져올 수 있다. html생성 방법1 안에 태그를 생성하려면 document.createElement() 는 html 태그를 생성해 준...

pants 라는 변수를 만들고 서버에서 보낸 데이터라고 가정해 보자. pants 데이터 갯수만큼 을 생성하고 싶으면 반복문을 사용하면 된다. pants.length 만큼 반복하면 pants의 데이터만큼 반복이 된다. 하지만 forEach 반복문을 사용하면 더 쉽게 생성이 가능하다. forEach array 자료 뒤에 붙일 수 있는 forEac...

클라이언트에서 서버로 어떠한 리소스로 부터 정보를 요청하기 위해 사용되는 메서드이다.

sort() array 자료는 순서개념이 있어서 정렬이 가능하다. ‘가나다’ 순으로 정렬하려면 배열.sort() 이다. 숫자정렬의 경우 위와 같은 콜백함수를 파라미터로 넣어준다. 원리 a, b는 array 안의 자료들이다. return 오른쪽이 양수면 a를 오

DOM(Document Object Model) DOM이란? 자바스크립트는 HTML 조작에 특화된 언어이다. 그런데 HTML 과 JS는 별개의 언어인데 어떻게 html을 해석하고 조작할 수 있을까? JS가 HTML을 해석하고 조작하기 위해선 HTML을 해석할 수 있는 문법으로 변환해 놓는다. array 혹은 object 자료형에 담는다면? 그래서...

Window Storage 개발자도구의 Application 탭에서 스트리지 정보를 확인할 수 있다. Local Storage / Session Storage (key : value 의 형태로 문자, 숫자 데이터 저장가능) Indexed DB (크고 많은 구조화된 데이터를 DB처럼 저장가능) Cookies (유저 로그인정보 저장공간) Cache Stor...

position : sticky 스크롤이 되어서 요소가 화면에 나오면 고정시킨다는 특성이 있다. 스크롤이 되어서 이미지가 보이는 순간 viewport의 맨 위에서부터 100px 위치에서 고정이 된다. 그리고 부모 박스를 넘어서 스크롤이 되면 이미지도 같이 사라진다. 주의점 스크롤을 할 만한 부모 박스가 있어야 한다. top 등 좌표속성과 함께 써야 ...

콘솔창에 this 키워드를 출력하면 window {…} 라는게 나온다.비슷하게 일반 함수 내에서 this를 불러보면window 라는 똑같은 값을 출력한다.모든 전역변수, 함수, DOM을 보관하고 관리하는 전역객체 IE 10버전 이상에서 ‘use strict’ 키워드를

일반 함수에서 this는 windowobject 내의 함수(메서드)에서 쓰면 함수를 동작시키는 objectJS에서 오브젝트를 비슷한걸 여러개 만들고 싶을 경우오브젝트를 복사하는게 아니라 constructor를 만든다.여기서의 this는 기계로부터 새로 생성될 오브젝트들

일반적으로 함수를 만들 때 (1) 또는 (2)처럼 만들고함수(); 라는 키워드로 함수를 실행한다. ES6 부터는 신문법을 사용하여 함수를 만들 수 있다.함수는 본래 ,⑴ 여러 기능을 하는 코드를 한 단어로 묶고 싶을 때⑵ 입출력기능을 만들 때사용한다.화살표함수는 함수

변수나 함수를 선언하면 hoisting 이라는 현상이 일어난다.변수나 함수의 선언 부분을 변수의 범위 맨 위로 강제로 끌고가서 먼저 해석 한다.위와 같이 함수를 만들었을 때, 눈에 보이지는 않지만 parser가 코드를 해석할 때 아래의 순서로 해석을 한다.변수의 선언

함수를 실행시킬 때 소괄호가 아니라 문자를 이용해서 함수를 실행시킬 수 있다.소괄호 대신 ‘백틱’ 문자를 붙여주면 위에선 해체분석기() 라는 함수가 실행 된다.함수의 파라미터 두 개를 추가하면 마지막 줄처럼 문자열을 이용해서 그 문자열을 해체분석할 수 있다.첫 째 파라

spread operator를 붙여서 출력하면 괄호가 제거된 ‘hello’, ‘world’만 콘솔창에 출력 된다.문자에 붙이면 문자에 붙은 괄호를 제거한다.문자도 array 자료형과 비슷하게 안보이는 대괄호가 쳐져 있다// iterable 객체 라는 의미인건가?두 개의

어레이라는 자료 안에 있는 모든 숫자 10, 20, 30을 더하기() 함수의 파라미터로 사용하고 싶다면직접 손으로 적거나와 같이 해야 할 것이다.하지만 spread 연산자를 사용하면10, 20, 30을 더해준 결과가 출력이 된다.spread 연산자가 없던 시절,appl

함수를 만들 때,파라미터의 값을 안 적을 경우 기본값을 줄 수 있다.더하기() 함수는 파라미터를 두 개 입력할 수 있다.하지만 함수를 실행할 때,1이라는 하나의 파라미터만이 쓰였다.이러한 경우 b = 10 이라고 선언해 두었던 default 파라미터 값이 10이 b에

함수를 만들 때,… 이라는 기호를 파라미터 왼쪽에 추가할 수 있다.파라미터들이라는 변수는 모든 파라미터들을 배열 안에 담는다.첫 두 개의 파라미터는 각각 a와 b에 할당 되고그 뒤에 오는 나머지 파라미터들은 파라미터들 이라는 배열이 된다.나머지 파라미터 라는 뜻대로 나

JS의 자료형은 크게 2가지로 분류된다.PrimitiveReference자료 자체가 변수에 저장이 된다.문자, 숫자 등이 대표적이다.Array, Object 자료형이 여기에 속한다.자료를 변수에 직접 저장하는게 아닌 자료의 위치를 가리키는 화살표(레퍼런스)를 변수에 저

학생 리스트를 만들어야 한다고 가정해 보자.30명 만들어야할 때, 위처럼 하드코딩 30개 하는 것 보다비슷한 오브젝트들이니 복사를 하는게 더 효율적이다.근데 할당 연산자 ‘=’ 를 이용해 var학생2 = 학생1 이라고 복사할 경우,의도한 결과가 아니다.이 때 사용할 수

생성자 함수가 가진 프로퍼티들을 물려 받아서 인스턴스를 만드는 것을 상속(inheritance) 이라고 한다.생성자를 만들 경우 내부에 prototype 이라는 항목이 추가 된다.prototype은 일종의 유전자 역할을 해주는 비밀공간인 셈이다.기계.prototype에

자식이라는 객체는 부모를 prototype으로 두게 된다.자식의 age를 바꾸고 싶다면

class를 상속한 class를 만들고 싶을 때 쓴다.이제 new 할아버지() 키워드로 새로운 객체를 생성할 수 있다. 그런데 이 class가 너무나도 유용한 나머지 이것과 유사한 class를 하나 더 만들고 싶다면?그냥 class를 하나 만들고 내용을 그대로 옮겨주면

오브젝트 내의 함수들을 괄호 없이 쓸 수 있고,데이터의 무결성을 보존하기 위해 쓰는 키워드이다.immutable데이터를 수정하거나 출력할 때 직접 원본 데이터를 다루는게 아니라함수로 간접적으로 다루어야 하는게 트렌드이다.내년 나이를 출력해 보고 싶다면,사람.age +

변수 array 의 데이터들을 각각의 변수에 담고 싶다면 아래와 같이 구현하면 될 것이다.구조분해할당을 통해 더 쉽게 할당을 할수 있다.데이터의 자료랑 비슷한 형태로 변수를 선언해 주면 각각의 변수가 각각의 데이터를 가진다.default값좌우의 갯수가 다르기 때문에 변

JS코드가 길어지면 다른 파일로 쪼개는게 좋은 관습이다.import 해 온 변수, 함수는 읽기만 가능하고 수정이 불가능한 read-only \*\*\*\*이다.HTML 파일에서 ES6 importHTML 파일 안에서 ES6 import 문법을 쓰려면 type="modu

자바스크립트의 실행은 동기식 처리로,동기식 처리란 한 번에 코드 한 줄씩 차례차례 실행된다는 의미다.웹브라우저는 stack이라는 코드 실행 공간이 있는데 stack에서 코드를 한 줄 한 줄 차례로 실행한다.위 코드는 1, 2, 3이 차례로 출력 되는데 이를 동기적이다

new Promise() 로 인스턴스를 생성하면 Promise가 만들어진다.만들어진 변수 프로미스 에 then() 을 붙여서 실행가능하다.프로미스 안의 코드가 실행이 완료되었을 때 then() 함수 내의 코드를 실행해 준다.코드 실행이 실패했을 경우엔 catch() 함

Symbol() 를 이용하여 파라미터로 해당 설명을 적는다.Symbol은 Object 자료형에 비밀스런 key값을 부여할 때 쓴다.Object 자료형에는 문자로만 key값을 입력할 수 있다.문자가 아닌 자료형을 입력하면 자동으로 문자로 치환된다.그런데 Symbol도 k

Object자료형과 같이 key, value 형태로 자료를 저장할 수 있는 자료형이다.Object자료형과는 다르게 자료의 연관성을 표현해 준다.key, value의 값에 모든 자료형을 쓸 수 있다.Array 자료형과 형태가 비슷하다.중복자료를 허용하지 않는다.흔히 배열

가령, <custom-input> 이라고 입력하면 <label> , <input> 가 출력되게 만들고 싶을 때 쓸 수 있다.<custom-input> 같은 커스텀 태그를 컴포넌트라고 할 수 있다.이 컴포넌트를 만들기 위해 class문법을 쓰면 된다

크롬 개발자도구 - 설정 - show user agent shadow DOM 체크시,여러개의 div 를 이용해 만들어진 것을 알 수 있다.이걸 shadow DOM이라고 하는데 ‘일반적으로 볼 수 없는 숨겨진 HTML’을 의미한다.attachShadow() 로 shado