전체 글 (67) 썸네일형 리스트형 [JS] ES6 : Spread Operatot (스프레드 연산자) 미니 프로젝트로 movie seat booking 페이지를 만들다가 새로운 ES6 문법을 알게 되었다. 바로 '스프레드 연산자('...')'라는 것인데 사용법은 아주 간단하다 const arr = [1,2,3] const arr2 = [...arr,4,5] console.log (arr2) ; // [1,2,3,4,5] 기존에는 concat 매서드를 사용했다고 하는 데 훨씬 간단하게 연결, 복사 기능을 수행할 수 있어서 알아두면 좋을 것 같다!! + 더 자세한 내용은 ↓ https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax [JS] const를 조작할 수 있는 경우 노마드코더 챌린지가 끝나고 챌린지 도중 궁금했던 부분을 더 세세히 이해하기 위해 윤인성 강사님의 유튜브 강의를 들었는데 너무 설명을 잘해주셔서 잊어버리기 전에 기록! 오늘의 궁금증: const는 재선언, 재할당이 불가능하다고 배웠는 데 const a=[1,2]같은 array에 추가로 값을 넣을 수 있다고?왜?? 이를 이해하기 위해선 스택과 힙에 대해 먼저 알아야 합니다 -스택: 기본 자료형과 주소 등을 저장하는 메모리 공간 (여기서 기본 자료형은 숫자, 문자열, 불 등을 의미) -힙: 복합 자료형을 저장하는 메모리 공간 (복합 자료형은 배열, 함수, 객체 등을 의미) -주소: 저장된 자료의 위치 -레퍼런스한다: 스택의 주소가 힙의 자료를 가리키는 것 -레퍼런스 변수: 스택에 저장된 것중에 .. [JS ] 백틱(` `) 사용법 요즘 나는 노마드코더의 바닐라 자바스크립트 챌린지 중이다. 이 챌린지로 자바스크립트를 처음 접하고 사용하는 중이라 매 챌린지가 고비지만 slack을 통해 많은 분들이 도움을 주셔서 잘 버티고 있는 중이다:) 오늘은 비교적 간단한 챌린지를 진행했는데 분명 식은 잘 작성한거 같은데 작동이 안됨,,, slack을 통해 도움을 받은 결과 백틱을 사용하라고 알려주셨고 그래서 평소 대충 알고 있었던 백틱을 자세히 찾아보았다!!! https://curryyou.tistory.com/185 [JS] 자바스크립트 템플릿 리터럴: 백틱(``), 달러(${ }) 사용법 # 템플릿 리터럴(Template Literal) ES6부터 새로 도입된 문자열 표기법이다. 문자열 생성시 따옴표 대신, 백틱(`)을 사용한다. var .. [JS] 이벤트 알아보기 Events title.addEventListener("click", handleTitleClick) -addEventListener로 listen할 이벤트를 첫 번째에 적어주고 이벤트가 발생했을 때 동작하길 원하는 function을 두번째 칸에 적어줍니다 -여기서 가장 중요한 것은 handleTitleClick이 곧바로 실행되지 않도록 하는 것 handleTitleClick() 처럼 괄호 넣지 않도록 주의!★ -'.removeEventListener'를 통해 제거 가능 event 찾는 방법 1. 구글에 찾고 싶은 element의 이름, 예를 들어 'h1 html element mdn' 이라고 검색, Web APIs라는 문장이 포함된 페이지 찾아서 읽기 2. console.dir()를 .. [JS] HTML in Javascript JS와 HTML은 연결되어 있고 JS에서 HTML 변경 가능! 그런데 왜 굳이 JS에서 HTML을 변경해야 할까? 하는 궁금증 생겨서 검색해보니 서버와 통신을 하거나 복잡한 일들을 처리할 때 JS 파일에서 처리하게 되는데 이때 유용하게 쓰일 것이라고 하네요ㅎㅎ document.getElementBy~ -HTML에서 element를 찾아주는 기능 -element 찾으면 JS로 HTML의 무엇이든 바꿀 수 있음 -getElementById / getElementByCalssName / getElementByTagName 등 있음 document.querySelector() -가장 많이 사용 -CSS selector 사용하여 검색 가능 -조건 만족하는 것 여러개 있어도 첫번째로 검색된 것만 가져옴 (다 가.. [JS] 조건문 알아보기 조건문(conditional) -prompt는 사용자에게 창을 띄어서 질문할 때 사용하는 데 지금은 안쓰는 구식. (css 사용 불가능함) -parseInt() : type 변경 문자 15를 숫자 15로 바꿔야 할때 등에 이용(NaN 뜰때 사용) ※숫자인지 알 수 있는 방법 console.log(isNaN( )); True: 문자 False: 숫자 조건문 만드는 방법 if(condition){ ///condition ===true } if else{ } else{ } condition에는 true or false가 들어감 그래서 condition 자리에 isNaN( ) 넣어줌! '||' 는 or , '&&'는 and 라는 의미 '==='는 equal , '!==" 는 not .. [JS] function 알아보기 Functions function: 어떤 코드를 여러 번 실행할 수 있게 해주는 것 (1) function 만드는 법 function sayHello() { console.log("Hello!"); // } (2) function 실행 방법 (원하는 횟수 만큼 실행) sayHello() (3) argument function을 실행하는 동안 어떤 정보를 function에 보낼 수 있는 방법 function sayHello(nameOfPerson, age) { console.log("Hello my name is " + nameOfPerson ~~~ ); } sayHello("nico", 10); sayHello("dal", 23); [CSS] Transition 알아보기 transition의 기능 : CSS 속성을 변경할 때 애니메이션 속도를 조절해 줍니다. 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있습니다. 자연스러운 애니메이션 효과를 만들때 유용합니다. 선언 (1)property: 속성 (2)duration: 지속시간(ms, s) (3)[timing-function] (생략 가능) -ease-in -ease-out -ease-in-out -cubic-bezier() (4)[delay] (생략 가능) 예시 transition: all 2500ms ease-in 1000ms; 이전 1 2 3 4 5 6 7 8 9 다음
