Javascript

클래스명으로 셀렉트 가능\*\*중요한점 - 인덱싱 해줘야한다. 이유는? 클래스명 아래 여러개가 있기 때문.ex) 아래에 class "title"인거 여러개 있으니 인덱싱으로 어떤걸 선택할지 명확하게 써줘야함

위 코드를 해석해보면 'navbar-toggler' 클래스의 첫번째 항목으을 클릭하면, 'list-group'클래스의 첫번째의 클래스에 show를 add 하라는 뜻

querySelector

jQuery

조건문

setTimeoutex) 1000ms(1초)뒤에 function()안에있는 \~\~~를 실행해줘setIntervalex) 1000ms(1초)마다 function()안에있는 \~\~~를 실행해줘

Scroll Event scrollY > 유저가 스크롤바를 얼마나 내렸나를 나타냄 가로는 scrollX 사용 scrollTo(x,y); >x,y만큼 스크롤 강제로 이동하기. scrollBy(x,y); >현재위치부터 강제로 x,y만큼 이동하기. ex) ** scr

ex)위의 경우 .tab-button 3가지 모두 다 선택되어버리는데, 이때 인덱싱을 주기 위해 eq(0)을 사용 한다.

사용법이지만 횟수에 숫자를 넣는게 아니고,console.log를 세번 반복한다는 for 반복문해석하자면i=0부터 시작해서, => var i=0복붙할때마다 i+1씩 더해주세요 => i++3되면 끝내주세요 => i<3

이벤트버블링위와 같은 상황에서 black-bg에 onclick을 줬지만, 하위요소인 white-bg, h4 등등 다른요소를 onclick 해도 효과가 나타나는것.위와같이 종이를 겹쳐놓고 누르게 되면,아래있는종이도 같이 눌러지는 원리와 동일함

위의 상황에서 eventlistener의 콜백함수의 파라미터에 e를 넣게되면, 아래의 것들 사용 가능e.target; -> 유저가 실제로 누른거위의 script에서 console.log(e.target); 을 입력 한 뒤, 콘솔창을 띄우고 h4를 onclick 하면 아

위의 긴 반복문을 함수로 축약하려면, 아래처럼 축약하면 될것같지만 작동이 안된다.함수 안에 변수가 발견 되면, 변수를 아래와 같이 파라미터로(i를 num으로) 바꿔줘야 잘 작동합니다.

백틱

array에 붙일 수 있는 반복문ex)위와같이 forEach를 사용하면, 3번 반복됨 ( pants에 3개가 있으니까)만약, var pants = 28, 30, 32, 34; 라면, 4번 반복됨forEach반복문을 쓰려면 항상 콜백함수 넣어줘야 한다.ex)

위의 경우 페이지가 스윽 한번 읽고 지나가기 때문에, 페이지 로드시 딱 1번 실행되고 끝남.유저가 셔츠를 선택할 때마다 코드를 실행시키려면,그때 사용하는게 바로!!위와같이 이벤트리스너를 통해 코드를 짜면, 유저가, 첫째 셀릭트 인풋에 변경할때마다 '\~\~~' 아래 코

object 자료 갯수만큼 반복문 돌림ex) 결과 : 1이 콘솔창에 2번 출력 됨.ex2)결과 : name , age가 콘솔창에 출력됨

ex)

함수에서 소괄호를 열고 닫는게 출력 시 , 완전히 다른 값이 출력되는 걸 주의!

참과, 거짓을 구분하는 truthy, falsy의 경우 falsy의 경우의 수가 적으니 falsy만 암기하고 나머지는 truthy라고 생각하자.Falsy(거짓)false0nullundefindedNaN''0n위 7가지 이외의 것들은 모두 참(truthy)

Switch문은 else if문과 동일함 else if 말고 Switch를 사용하는 경우는, 케이스가 다양할 때 사용하기 쉬움,switch문은 break를 걸어주지 않으면, case밑의 것 모두 실행됨.ex)이런 경우 break로 아래 동작을 막아줘야함ex)if els

method란 ? \->객체 프로퍼티로 할당 된 함수ex) 아래에서 fly부분이 methodex)화살표함수는 일반함수와 달리 자신만의 this를 가지지 않는다. 화살표 함수 내부에서 this를 사용하면, 그 this는 외부에서 값을 가져오게 됨.

일반 함수의 this는 호출 위치에서 정의하고, 화살표함수의 this는 자신이 선언된 함수(렉시컬) 범위에서 정의ex) 아래와 같이 화살표함수의 this를 console.log로 출력 해 보면 Ricardo Quaresma가 출력 됨.객체데이터 내에서 하나의 속성에 함

식별자 : 사용자가 임의로 만드는 명칭 \- ex) const title 에서 title 예약어 : 자바스크립트 자체적으로 특정 기능을 실행 하기 위해 예약된 명령어 \- ex) const, console.log실행문 : 특정 명령어를 실행하기 위한 구문 \- ex

변수 : 특정 데이터값을 임시로 저장하는 공간변수를 사용하는 이유 1\. 특정 값을 자주 사용해야 될 때(성능상의 이점) 자바스크립트로 하여금 한번 찾은 내용을 또 찾지 않고 재사용해야 될 때. 2\. 반복적인 구문이나 값등이 여러코드에 걸쳐서 많이 쓰일 때 (편

자료형(Data Type)원시형자료(primitive type) : 특정 값이 메모리에 바로 저장(값만 저장됨)문자(String)숫자(Number)논리형 (Boolean : true, false를 나타냄)undefined (undefined) : 변수 선언하고 값을 할

배열이란?연관된 값들을 하나의 그룹으로 묶어서 나열한 자료구조ex)배열을 뽑아내는법ex)

객체란데이터를 property라는 인덱싱을 통해 구조적으로 묶어놓은 형태ex)객체에서 값 뽑아내기

반복문이란 ?반복의 횟수를 지정하고, 횟수만큼 특정 코드를 반복해서 실행해주는 구문ex)반복문 예시

for of 반복문의 예시

자주쓰는 실행코드들을 블록단위로 묶어서 패키징 해놓은 형태자주쓰는 코드들을 기능단위로 재사용 하기 위함.함수정의 : 미리 function 키워드를 이용해서 자주 쓸 코드들을 묶어서 정의하는 행위함수 호출 : 정의되어 있는 함수를 호출 해야지만 비로소 기능이 실행됨선언적

매개변수(parameter), 인수(argument), 반환값(return) 매개변수란(parameter)? >함수 외부에서 함수 내부로 특정값을 전달하기 위한 통로 이름 인수(argument) >함수를 호출 할 때 파라미터를 통해서 전달되는 값 반환값 (retur

콜백함수란?함수 호출시 인수로 함수가 들어가는 형태를 말함.forEach의 예ex)map의 예ex)forEachES5foreach의 경우 배열이 반복처리 기능만 가지고 있음.유사배열(DOM 반복가능)mapES6 반복기능 외에 추가로 반복되는 배열을 새로운 배열로 복사,

toString() : 배열을 문자로 변환join() : 구분자를 활용해 문자열로 이어붙이기ex)pop() : 배열의 마지막 요소 제거(리턴값으로 잘라낸 요소 반환)ex)push() : 배열의 끝부분에 새로운 요소 추가(리턴값으로 배열의 길이 반환)ex)shift()

new Date() : 날짜 정보값 반환ex)new Date().getFullYear(); : 해당 년도를 반환new Date().getMonth(); : 해당 월을 반환 하지만 1월을 0으로 인식, 2월을 1로 인식ex)new Date().getDate()); : 해

전개연산자ex)ex2)

자식요소 탐색하는법부모요소.querySelector()부모요소.children형제요소 탐색이전형제요소 탐색 : 형제요소.previousElementSibling다음형제요소 탐색 : 형제요소.nextElementSibling부모요소 탐색현재요소.parentElement;

이벤트 : 무언가가 일어나는 행위 ,액션사용자가 발생시키는 이벤트click, mouseover, mousemove, mousewheel, scroll시스템이 발생시키는 이벤트load, error이벤트 연결방법DOM.onclick = () => {}DOM.addEvent

이벤트가 발생할 때 함수에 전달되는 특별한 인수값(이벤트객체)ex)a태그 입력했을때, 네이버로 이동하는게 아니라 경고창(콘솔)을 띄우고 싶으면위와같이 코딩시, 경고 콘솔창이뜨고 바로 링크로 이동되어버린다. 이 떄, 아래와 같이 이벤트 객체 작성ex)위의 경우 e.pag

ex)위의 경우 box의 배경을 "hotpink"로 css를 바꿀 수 있음ex)배경색을 확인하고 싶을 떄ex2) 너비값을 확인하고 싶을 때.

속성제어 : 속성은 attributue,ex)href, src, alt 등등getAttribute : 속성의 값을 가져오기(보여주기)setAttribute : 속성의 값을 변경하기setAttribute("1","2"); -> 1이라는 속성의 값을 2로 변경 이라는 뜻

ex 1.)해당 메뉴1,2,3,4,5를 클릭하면 'on'이 붙도록(반복적인 요소에 이벤트 연결)ex 2.)ex 3.)

ex)클릭한 menu버튼만 on이 활성화 되게 클래스명 제어중첩반복문

전역변수(window전역에 동작이 됨), 글로벌변수 라고도 함코드블록 밖에서 선언된 변수해당코드 전역에 걸쳐서 접근 가능여러개의 서로다른 함수들이 같은 값을 공유해야 될 때 전역변수 사용전역변수가 많아지면 전역변수 오염이 발생(꼭 필요한 경우에만 사용)지역변수(코드블록

keydown : 특정 키를 누르고 있을때keyup : 특정 키를 누르다 손을 뗄때keypress : 키를 누르고 있을 떄 (문자관련 키만 동작)아래와 같이 콘솔창에 계속 입력이 됨.ex)아래와 같이 누르다가 손을 떼는 순간 keyup이 콘솔창에 입력됨.ex)어떤 키를

innerWidth : 브라우저 안쪽의(브라우저 안쪽은 인터넷창에서 즐겨찾기 밑에 페이지 그자체를 말함) 너비값 반환innerHeight : 브라우저 안쪽의 높이값 반환outerWidth : 브라우저의 프레임을 포함한(프레임이라 하면, 모니터에 보이는 인터넷 창 전체)

setTimeout : 일정 시간 뒤에 특정 코드를 호출(지연)setInterval : 일정 시간 간격마다 특정 코드를 반복(반복)ex) 클릭하고 3초 뒤에 콘솔창 띄우기(settimeout)인수가 두개 들어감 (익명함수 , 걸리는시간)ex) 박스에 마우스가 들어가면

일반적으로 코드블록 안쪽에서 console.log(this)를 할 경우 window가 찍힘.ex)ex)아래의 경우 this가 윈도우를 출력하는게 아니고, 일반 function이 들어가있는 익명함수의 이벤트문에서는 안쪽의 this값은 이벤트가 발생한 당사자(btn)를 지

애니메이션 속성을 조금 더 디테일하게 사용하게끔 도와주는 라이브러리 / 플러그인http://gsap.com 접속 후 get GSAP 버튼 클릭CDN 들어가서 scrollTrigger 체크 후, 스크립트 복사 후 붙여넣기.image-2를 x축 200만큼 이동 /