DDOstory

🪁  이벤트어떤 동작이나 상태 등의 사건을 발생하는 것을 의미html dom 요소들은 이벤트가 발생했을 때 웹 브라우저에서 이벤트가 발생한 걸 알아챌 수 있도록 이벤트 신호를 발생자바스크립트는 발생한 이벤트의 반응을 해서 어떤 동작을 수행할 수 있음해당 이벤트를 감지할 수 있는 EventListener를 EventHandler를 지정 = 이벤트 리스너를 등록한다🪁  addEventListener()이벤트 리스너를 등록하기 위해 메소드 사용메소드의 첫 번째 인자에는 이벤트의 종류를 문자열로 지정두 번째 인자에는 이벤트가 발생했을 때 실행시킬 EventHandler 함수를 전달 해주어야 함내부에 직접 작성하여도 됨함수를 작성하여 함수를 인자로 전달하는 방식으로 작성EventHandler함수는 이벤트가 발..

📱  DOM (Document Object Model)html이나 xml 같은 문서에 요소들을 계층적으로 표현해서 생성하고 수정하고 삭제하는 등어떤 조작이 가능하게끔 해주는 하나의 인터페이스를 의미모든 html의 요소들은 html 도움을 통해 우리가 접근할 수가 있고 조작할 수 있게 됨DOM을 배우는 이유는 html 문서에 있는 어떤 요소를 조작하거나 새로운 요소를 만들어서 html 문서에 추가하거나 기존의 요소를 삭제하는 것을 하기 위함요소 선택과 변경, 생성이라는 크게 3가지 분류로 나눠서 이야기요소를 조작하려면 우선 어떤 요소를 조작할 지 요소를 선택하는 과정 필요html 문서에 있는 요소들 중에 내가 원하는 특정 요소를 선택하기 위해서는 html 문서 객체인 Document 객체에서 제공하는 메..

🛎️  구조분해할당배열 또는객체의 구조를 분해해서 분해된 값을 개별적인 변수에 담는 표현식을 의미각각의 요소를 서로 다른 변수의 값으로 저장을 하려면 각각의 인덱스로 요소에 접근을 해서 변수의 값으로 지정배열 내부의 값을 새로운 변수에 각각 할당하고자 한다면 하나씩 변수를 선언하고  값을 할당하는 과정을 거침const arr = [1, 2, 3, 4, 5];const one = arr[0];const two = arr[1];const three = arr[2];🛎️  배열의 구조분해할당변수를 선언하고 할당하는 과정을 한 번에 해결할 수 있음대열을 옆에다가 우측에다가 작성을 해주면 오른쪽에 주어진 배열을 구조 분해해서 좌변에 위치하고 있는  변수들에 각각 할당하게 됨const arr = [1, 2, 3..

🧱  for in객체에 사용할 수 있는 반복문배열에서 사용하는 for of라는 반복문에 객체 버전객체를 순환객체에 포함되어 있는 모든 키 값을 순화하면서 출🧱  객체 축약 방법 키와 값이 똑갗은 이름을 사용할 때 뒷부분을 지우고 중복되는 이름을 한 번만 명시해서 프로퍼티를 약해서 표현const name = '겨울';const country = 'KR';const user = { name: name, country: country,};console.log(user);🧱  메소드 축약 표현객체의 프로퍼티로 선언이 된 함수를 메소드라고 함함수를 호출할 때는 객체의 프로퍼티로 접근객체 내부의 메소드를 작성을 할 때 평선이라는 키워드를 생략하고 메소드를 축약해서 표현할 수 있음const obj =..

메소드를 외우는게 아니라 이런 것들이 존재한다는 것 정도만 알아두면 됨 💣 toUpperCase(), toLowerCase()대소문자 변환하는 메소드toUpperCase()는 모든 문자를 대문자로 변경toLowerCase()는 모든 문자를 소문자로 변경const str = 'Hello World!';console.log(str.toUpperCase());console.log(str.toLocaleLowerCase());💣 trim(), trimStart(), trimEnd()문자열의 공백을 제거하는 메소드trim()은 문자열의 앞쪽과 뒤쪽에 있는 공백을 제거trimStart()는 문자열의 앞부분의 공백만 제거trimEnd()는 문자열의 뒤부분의 공백만 제거const str = ' hello ..

✏️  함수하나의 동작으로 어떤 목적을 달성하거나 원하는 결과를 도출하기 위한 코드 집합 의미한 번만 사용하고 마는 것이 아닌 반복적인 동작을 처리하기 위해 작성되고 같은 이름으로 계속하여 재사용할 수 있음✏️  함수 작성함수를 작성할 때는 펑션이라는 키워드 사용뒤에 함수의 사용할 이름을 작성을 함뒤에 괄호를 넣는데, 괄호는 함수에서 사용하려는 인자를 담는 공간을 의미인자들을 반드시 정의해야 하는 것은 아님인자가 필요하지 않은 함수라면 그냥 없이 사용해도 됨중괄호 부분에는 어떤 처리를 할지를 작성하면 됨함수를 정의할 때 작성했던 함수 이름을 작성하고 뒤에 괄호를 열어서 필요한 인자를 넣어주면됨한 번 만든 함수는 언제든지 재사용할 수 있고 어느 위치든 내가 필요한 위치에서 부를 수 있다는 장점이 있음fun..

🔍  반복문반복적으로 수행해야 하는 동작을 처리하기 위해서 사용되는 제어문자바스크립트에서 제공하는 반복문의 종류는 for문과 while문으로 나눌 수 있음🔍  forfor 키워드 사용괄호 안에 반복을 위한 어떤 조건들이 명세가 됨시작 값을 정의하고 각각을 세미콜론(;)으로 정의반복의 조건증감 값을 작성for(let i = 1; i 참이라면 반복문을 실행하고 거짓이라면 반복문을 빠져나옴🔍  시작 값을 생략하는 방법 / 증감 식을 생략하는 방법for문을 사용할 때 시작값, 조건식, 증감식 인자를 사용하는데 작성하지 않고도 생략할 수 있는 방법이 있음let i = 0;for(; i let i = 0;for(; i 🔍  break 반복문은 기본적으로 주어진 조건에 의해서 결과값이 거짓이 될 때 반복문을 ..

🔎  조건문어떤 지정된 조건이 참인지 거짓인지에 따라서 서로 다른 코드로 분계하기 위해서 사용조건이 참일 때는 a라는 코드를 실행시키고 거짓일 때는 b라는 코드를 실행시킨다더니 이런 조건을 처리하기 위해 사용되는 제어문을 의미 자바스크립트 조건문에는 if문과 swith문이 있음🔎  if많은 프로그래밍 언어를 배울 때 가장 기본이 되고 대표적인 조건문if라는 키워드 사용() 안에 조건을 작성을 하고 참일 경우에 뒤에 이어지는 블록 내부에 위치한 코드를 실행하게 됨const a = 10;const b = 20;if(a a의 값이 b의 갑보다 작기 때문에 윗부분 조건에 참이 되어 블록 내부에 위치해 있는 문자열을 출력하여 나타냄const a = 10;const b = 20;if(a > b){ cons..

🎈 자바스크립트 연산자 종류산술 연산자 증감 연산자비교 연산자논리 연산자삼항 연산자널리쉬 연산자비트 연산자대입 연산자🎈 산술 연산자+,-,*,/모듈러(%) , **(지수 연산)나눗셈을 했을 때 몫이 되는 값console.log(10 / 5);나머지 연산자를 사용하면 모듈러 퍼센트 기호를 사용console.log(10 % 5);이 연산자를 사용하면 결과가 나눗셈을 실행한 몫이 아니라 나머지 값을 결과값으로 가지게 됨지수 연산자는 앞의 숫자에 대한 제곱을 하여 결과값을 나타내주는 연산자🎈 증감 연산자숫자를 증가시키거나 감소시키기 위해 사용되는 연산자++ => +를 연달아 사용하면 숫자 값이 1 증가let number = 10;number++;console.log(number);-- => -를 연달아 사..

📕  변환이란?플러그인의 도움 없이 웹 브라우저에 3차원 공간을 구현할 수 있게 되었음HTML5에서 3차원을 구현하는 방법은 크게 2가지자바스크립트를 사용한 webGLCSS3를 사용한 3차원 배열📕  2차원 배열대부분의 컴퓨터 프로그램은 화면 좌표를 이용X축과 Y축이 있는 화면 좌표를 2차원 화면 좌표라고 부름Z축을 추가하면 3차원 화면 좌표로 확장3차원 화면 좌표에서 Z축은 웹 브라우저를 보는 사용자에게 가까울수록 큰 값임📕  transform 속성CSS3부터는 transform 속성을 사용해 객체를 변환할 수 있음변환이 가능한 이야기는 HTML 페이지 스스로 애니메이션 같은 플래시 콘텐츠를 만들 수 있음 코드를 실행하면 사각형이 60도 회전📕  2차원 변환 함..