웹 백엔드 개발자의 블로그

자바스크립트 와 타입스크립트/바닐라 자바스크립트와 타입스크립트

• 정규표현식 재미있는거

  자바스크립트 와 타입스크립트/바닐라 자바스크립트와 타입스크립트 2023. 2. 10. 10:01

  https://bluewings.github.io/unobstructed-hangul-regular-expression/ 한글 자동완성을 위한 정규식 정규식만으로 한글 자동완성을 쉽게 구현하는 방법을 설명합니다. bluewings.github.io

  Read More
• Dom 정리 프로젝트하면서 너무 많이 배워갑니다.

  자바스크립트 와 타입스크립트/바닐라 자바스크립트와 타입스크립트 2022. 8. 28. 00:53

  1.탬플릿 문자열로 무조건 해라 . 실수 무지 많이 한다. id구분해서 이벤트 지정도 힘든데 철자로 틀리면 개고생한다. 2.textContent, innerHTML 내용 넣는애들 id나 class 찾기 getElementId 나 className 또는 querySelector 또는 querySelectorAll 3.onclick에 함수 할당해서 안되면 id 지정해서 addEventListner 써서 click 이나 enter 일때 함수실행으로 하는 방법도 있다. 그리고 좀 참신한게 'keydown'으로 해서 e.keyCode =13 엔터를 치면이란 뜻임 으로 해서 하는 방법도 있다. 4. 태그.style.display = 'none'; 태그.textContent = "" 태그.innerHtml = "" ..

  Read More
• switch 랑 if문 바꾸기

  자바스크립트 와 타입스크립트/바닐라 자바스크립트와 타입스크립트 2022. 8. 25. 11:11

  https://moo-you.tistory.com/88 if문을 switch문으로 사용하기 여러개의 다중 조건 처리를 해야 하는 경우 if 문 대신 switch 문을 사용하면 좀 더 깔끔하게 코드를 정리 할 수 있다. 경품추첨기 만들기 : 번호가 1번이면 스마트폰 번호가 2번이면 자전거 번호가 moo-you.tistory.com 같은건데 조건문이 적으면 switch 아니면 if문 써라.

  Read More
• 엘리베이터 움직이기

  자바스크립트 와 타입스크립트/바닐라 자바스크립트와 타입스크립트 2022. 8. 18. 16:51

  1. 움직일 div id를 dom으로 가져온다. 2. dom변수.style.transform = "translateY("+(움직이고 싶은만큼의 수)+"px)" 위에건 y축으로 움직일때 사용하는거다. x축으로 움직일때 dom변수.style.transform = "translateX("+(움직이고 싶은만큼의 수)+"px)" 이렇게 하면 된다.

  Read More
• 자바스크립트 애니메이션 api

  자바스크립트 와 타입스크립트/바닐라 자바스크립트와 타입스크립트 2022. 8. 18. 09:28

  https://tagilog.tistory.com/539 인기 JavaScript 애니메이션 라이브러리 11 선 쓸만한 자바스크립트 라이브러리를 찾고 있던 중에 git 허브의 스타 순으로 작성된 아래의 목록을 찾을 수 있었습니다. 이 시간에서는 웹개발시에 유용하게 사용할 수 있는 자바스트립트 애니메 tagilog.tistory.com https://yamoo9.github.io/anime/ anime.js Javascript animation engine animejs.com https://grace-go.tistory.com/86 JS로 애니메이션 만들기 (setInterval,setTimeout) * 자바스크립트를 활용한 애니메이션 * - setInterval(함수,시간) : 매 '시간'마다 '함수'..

  Read More
• 틱택톡

  자바스크립트 와 타입스크립트/바닐라 자바스크립트와 타입스크립트 2022. 8. 17. 00:01

  https://bit.ly/3PqZYy2 틱택토 in js - Google 검색 2020. 12. 22. · 자바스크립트를 이용하여, 틱택토(Tic Tac Toe) 게임을 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용 ... www.google.com https://bit.ly/3zZJQO9 [js] 자바스크립트로 틱택토 구현하기 (ft. e.target.value, forEach) 자바스크립트를 이용하여, 틱택토(Tic Tac Toe) 게임을 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순서도 css 코드 순수 자바스크립트 코드 goddino.tistory.com https://bit.ly/3ArX9sk [J..

  Read More
• rest 파라미터와 스프레드 문법 차이

  자바스크립트 와 타입스크립트/바닐라 자바스크립트와 타입스크립트 2022. 8. 16. 15:26

  https://jeong-pro.tistory.com/117 Rest 파라미터와 Spread 연산자 정리하기 (feat. 함수의 가독성을 높이는 방법) Rest 파라미터 (Rest Parameter) Rest 파라미터는 Spread 연산자(...)를 사용하여 함수의 파라미터를 작성한 형태를 말한다. 즉, Rest 파라미터를 사용하면 함수의 파라미터로 오는 값들을 "배열"로 전달받 jeong-pro.tistory.com 함수선언식의 소괄호 안에 ...이 있으면 배열로 맵핑 소괄호에 ...이 있거나 다른곳에 있으면 배열 풀기 * 함수의 파라미터로 사용하는 방법 1 2 3 4 5 6 7 8 // ES6 function foo(x, y, z) { console.log(x); // 1 console.log(y);..

  Read More
• 자바스크립트(chapter1-2내용)

  자바스크립트 와 타입스크립트/바닐라 자바스크립트와 타입스크립트 2022. 8. 4. 16:52

  JS 자바스크립트 작성 위치 HTML 태그내 혹은 자바스크립트 작성 선언코드 자료형 문자열[ String ] “ “ 혹은 ‘ ‘ 안에 들어있는 데이터 숫자형[ Number ] 정수 혹은 실수 같은 자료형으로 인식 불 [ Boolean ] true 혹은 false 만 저장 가능 자료형 변환 Number( 데이터 ) : 숫자형 변환 String( 데이터 ) : 문자열 변환 Boolean( 데이터 ) 불 변환 연산자 산술연산자 더하기 -빼기 *곱하기 /나누기 %나머지 비교연산자 == 같다 !=같지않다 >=이상 초과

  Read More