JavaScript

정규식은 문자열에서 특정내용을 찾거나 대체 또는 발췌하는데 사용함양옆의 슬래시는 시작과 끝을 의미하고 i 는 플래그이다RegExr: Learn, Build, & Test RegEx정규표현식을 테스트할 수 있는 사이트( ) 그룹핑또는문자셋, 괄호 안의 어떤 문자든^ 부정

어레이는 const @ = 1, 2, 3, 4, "히히" 로써 대괄호로 작성값을 불러올 때에는 @2 로써 숫자로 순서대로 불러올 수 있음여기서 순서인 숫자는 인덱스라고 부름값을 추가할 때에는 @.push(%) 로써 내용물 추가 가능또한 어레이 안에 중괄호{}로 오브젝트

forEach 와 어레이, 그리고 function 삼신기, v k arr 값으로 여러번 넣을 값을 하나의 코드로 정리 가능하다function 으로 어레이를 작동시킬 경우 function(v, k, arr) 로 작성시 v는 어레이의 내용물, k 는 순서값이다.일단 어레

도큐먼트에서 data-name="@" 를 태그에 적용해 놓으면 나중에 자바스크립트에서, dataset.name 으로 불러올 수 있다. 주로 v 값과 foreach 문으로 사용, innerText 대체용이다.도큐먼트에서 지정,JS 에서 불러오기,

어레이에 있는 객체들을 객체 갯수만큼 리스트 형식으로 다시 만드는 명령어. return item 필수!!중괄호를 빼고 소괄호만 놓았을 경우에는 바로 리턴문이 되는건 function 설명에서도 했고, 주로 리액트에서 컴포넌트를 쏴줄때 사용한다.forEach 와의 차이점

const @ = 어레이.filter(function, 혹은 (item) => item (비교연산자) %) : 어레이에서 item 이 % 와의 비교연산자 결과에서 true 값을 도출하는것 빼고는 제외시키고 어레이를 다시 생성한다.그러므로 @.filter 결과문은 어레이

include 명령어를 통해 특정 str 이 대조할 데이터에 포함되는지에 따라 boolean 이 도출된다.filter 문을 통해 boolean 이 true 인 값만 걸러진다.=> 검색기능 완성

const @ = { 내용물 } 로써 중괄호로 만들어짐, 중괄호 안에서는 다른 규칙을 따르게 되는데이런식으로 function 문 안에서는 원래 와같이 = 를 사용하는 것이 아닌 : 를 사용하여 값을 지정함 또한 마무리도 세미콜론이 아닌 그냥 콜론이 사용됨(,)또한 또다

어레이에 foreach 문이 있다면 오브젝트에는 for in, of 문이 있다.사용법은 아래 예시 참조,오브젝트 안의 변수(key) 갯수만큼 루프시킨다,각각 console.log 시킨 것, 어레이의 foreach 와 같다.여기서 key 는 오브젝트의 변수명이고, obj

input 에 name 을 설정할 경우 두가지의 옵션이 생기는데,첫째는 코드단에서 input 의 이름을 추적 경로로 바로 사용 가능하다는 점,예시)둘째 Object.fromEntries() 처리 했다면 name 값으로 {…} 들어가 있는 값을 추적도 가능하다.위의 명령

대입연산자 : =산술연산자 : + - \* / %증감연산자 : ++ -- 혹시나 숫자변수가 const 로 지정되어 있으면 실행 안됨비교연산자 : < > <= >= == === != !==논리연사자 : ! && ||할당연산자 : += -= \*= /= %= :

자바스크립트의 핵심이자 꽃이라고 할 수 있는 function 에 대한 이해를 돕기위한 구문이다.기본 생성은 위와 같이 하게 되며 변수에 지정도 가능하다.여기서 @는 작동스위치로서 기능줄이 작동하게 한다.%, $는 function 줄 안에서만 기능하는 매개변수이다 이 %

화살표 함수 const, let 이름 매개변수 => 작동함수 로써 작동하고, 원래라면 function 으로 쓰여야 할 매개변수와 함수값을 한줄로 간략히 만들 수 있게 되었다 생각하셈매개변수가 하나일때만 가능한게 화살표 함수이고, function(@) {명령어} 이 원래

이렇게 함수안에 자기 함수 실행문을 넣어 놓으면 무한반복하게 되는 재귀함수가 된다.근데 저거 stack oveflow 터짐..

if() 문은 중괄호로 작동하고 값이 true 일 때 작동한다 만약 false 일 경우 else 로 넘어가고 else 문을 작동시킨다.else if 를 사용하면 한번더 if 문을 사용하여 조건을 만들 수 있다 위쪽 조건이 false 인 경우 만들어질 하위 조건인 셈이다

Document이것은 자바스크립트에서 html 을 불러올 때에 사용하게 되는 매우 중요한 명령어로 html 안의 각종 요소들을 불러와서 수정 혹은 열람할 수 있다.선택은 자바스크립트 방식으로 Document.getElementById(id 지정시), getElement

삼항연산자위 코드는 스크롤링 에서 스크롤을 하는 방향을 감지하여 true 혹은 false boolean 을 도출하는 코드이다일단 변수값에 status 값을 넣어준다, 이후 변수.status = (조건문) 까지 일렬로 적고 ? @ : %; 로 마무리, 이중에 뒤에 적힌

new Dates() : 시간 불러오기,new Date("2022-03-23") 으로 기본 시간 설정 가능.new Date().getHours() : 시간 얻기 이 외에 다른 시간값도 구하기 가능(getSeconds, getMinutes)시간 바꾸기이런식으로 콘솔로그

@.split("특정문자") :만약 1,2,3,4,5 라는 문자가 있고 여기서 ,를 split 시키면 1, 2, 3, 4, 5 라는 어레이가 나오게 된다.특정문자 앞뒤 내용을 어레이로 저장하게 만드는 명령어이다.너무 빨라서 제대로 값이 안나온다면, setTimeout

컨텐츠 크기조정을 js 로 할 경우, 변수의 offset 주로 활용아래는 기본 offset(수치명) 에서 (수치명)을 . 뒤로 쓰고 모두 활용 가능한 명령어임 x, y 로 됨을 인지오브젝트의 값을 가져오는 명령어이다.@.offsetLeft@.offsetTop@.offe

scroll 이벤트 선택자 이후,let 좌표값저장어레이 = \[];foreach로, 좌표값 push 시키고window.pageYOffset >= 좌표값저장어레이.y - window.innerHeight/2EX)위 코드대로 그 어레이를 foreach 시켜 다시금 각 콘텐

jQuery.com기본적으로 google CDN script 링크를 html 에 삽입하여 사용하는걸 권장함.첫줄은 항상 위와 같이 놓는다.기본 예시기본적으로 쌍따옴표 "@" 로 모든 구문을 묶어주는걸 기본으로 하고,모든 명령자는 .명령셋() 로써 소괄호로 이루어지고 소

data.js 파일로 만들어지는 JSON 파일은, 평문으로 작성되는 데이터베이스 이다.첫 fetch 괄호내용물이 첫 .then function { } 중괄호로 들어가고그게 둘째 .then function{ } 중괄호로 들어간다혹은그냥 화살표 함수 사용하는게 나을듯, 만

canvas 태그 사용법2d 객체들은이후 ctx.명령어로 사용ctx.beginPath(); : 그리기 시작 설정ctx.closePath(); : 그리기 끝 설정ctx.lineTo(350, 100); : 선 만들기 (x, y)ctx.fillRect(x, y, width,

위 내용은 checkbox 타입의 input의 체크사항을 감지하여 만약 체크시에는 cookie 에 oneday 라는 값을 입히는 과정기본적으로 현재 시간에 해당하는 new Date() 명령어의 시간을 조정하는 setDay 명령어를 사용하나 여기서는 시범적으로 Secon

어레이에서 원래 있던 데이터를 유지하고 쌓는데 사용하는 구문, 만약 특정 어레이를 const 로 재 선언 처리하면 원래 있던 데이터가 싹 다 날아가고 갱신되게 되는데, 안에 있던 데이터를 유지하고 갱신시키지 않고 추가시키는 방법, react 의 state 훅과 궁합이

어레이에 있는 객체들을 객체 갯수만큼 리스트 형식으로 다시 만드는 명령어. return item 필수!!중괄호를 빼고 소괄호만 놓았을 경우에는 바로 리턴문이 되는건 function 설명에서도 했고, 주로 리액트에서 컴포넌트를 쏴줄때 사용한다.forEach 와의 차이점

비구조화 할당 혹은 디스트럭쳐링이라고 부른다. 오브젝트에만 활용된다고 알려졌으나 함수, 어레이에도 사용 가능하며 조건은 각각 다르나 원리는 같다.오브젝트 예시같은 경로로 위와같이 변수를 여러개 만든다면 줄여서 한줄로 가능하다.함수예시함수형으로도 사용이 가능하며 중요한건

특정 함수나 기능절앞에 new 를 붙여 선언하면 객체로 선언되며 내부 값들이 키값구조를 가진 오브젝트 형태 자체가 된다. 생성자라고 부르며 new Date 혹은 new FormData 등등으로 알 것이다. 예시,중요한 점은 화살표 함수로 만들어진 함수의 this는 자신

canvas 태그 사용법2d 객체들은이후 ctx.명령어로 사용ctx.beginPath(); : 그리기 시작, 새로 호출하면 이전과 다른 독립적인 시작점이 생성된다. fill은 이 하나의 beginPath 지점 안에서 모든색을 채운다. beginPath 는 clothPa

본격적으로 Canvas 를 통한 교육자료를 개발하기 시작하면서, Canvas 와 그에따른 핵심 기능들을 비틀어 가며 개발하고, 알게되는게 많아져 정리하게 되었다.기본적으로 동적인 효과는 모두 animating 함수 안으로 들어가 줘야 한다 일례로 이벤트리스너로 마우스의