본문 바로가기

javascript26

[html/javascript] CANVAS 알아보기 / 기본 사용법 & svg와 성능 비교 HTML5 : Canvas canvas 는 페이지에 그래픽적인 요소를 그릴 때 사용되는 html5 의 새로운 태그이다. 먼저 html 문서에 다음과 같이 를 삽입한다. 위의 요소를 js를 통해 찾아 제어하는 것이 canvas 의 기본적인 동작이다. const canvas = document.querySelector("canvas"); const context = canvas.getContext("2d"); 캔버스에 어떤 요소를 그리기 위해서 가장 처음으로 getContext()를 사용하여 위치를 정의할 필요가 있다. 기본적으로 2d로 정의되며, 위 요소를 사용하면 canvas에 2d 좌표로 위치를 지정할 수 있게 된다. beginPath(); 도형을 그리기 전에 지정해줌 closePath() : 도형의 .. 2020. 1. 23.
[javascript] ES6 클래스와 Prototype / 왜 Object instanceof Function은 true인가 ES6 Class와 Prototype #dev 자바스크립트는 프로토타입 기반 객체지향 언어다. 프토로 타입 기반이므로 클래스가 없고, 따라서 상속 개념이 존재하지 않는다. ES5까지는 프로토타입 체인과 클로저 등으로 상속이나 캡슐화 등을 흉내내어 구현해왔다 프로토타입 프로토타입은 프로토타입 링크와 프로토타입 오브젝트로 구성된다. 프로토타입 객체 객체는 언제나 함수로부터 생성된디. 객체 뿐만 아니라 함수와 array도 모두 함수로 장의되어 있다. function CreateItem(){}; const NewItem = new CreateItem(); // 함수를 통한 객체 생성 const obj = {}; //다음과 같이 객체를 선언하는 것은 const obj = new Object(); // Object.. 2019. 11. 9.
[javascript] 자바스크립트 Drag&Drop 구현하기 서론Html 드래그 앤 드롭 api는 돔 이벤트 모델에서 정보를 가져와 정보를 업데이트 하는 방식으로 이루어진다. 드래그 앤 드롭을 구현하는데는 여러 방법이 있는데 드래그 된 아이템의 CSS 스타일을 업데이트 할 수도 있고 아니면 드래그 할 아이템을 복사해서 드롭하는 장소에 붙여넣기 할 수도 있다.구현먼저 html을 통해 드래그 할 요소와 드롭할 요소를 만들자. draggable='true'를 추가하여 요소를 드래그 가능하게 만들 수 있다. 처음 알았음 태그 중에 디폴트로 draggable한 요소가 몇가지 있는데 는 가본적으로 드래그 가능하고, 은 드래그 불가능하다. drag dropzone 드래그 앤 드롭 이벤트 핸들러는 최소 세가지 요소로 구성된다. (전부 함수로 지정된다!!)ondragstart :.. 2019. 10. 6.
[Javascript] 자주 사용하는 정규표현식과 공부 사이트 서론자바스크립트를 연습하다가 발견한 점. python에서 replace()를 사용하면 문자열 전체에서 해당하는 문자가 바뀌는데 자바스크립트는 가장 처음 나오는 문자 하나만 바뀌었다.a = "this text is for test" print(a.replace("t", "r")) #rhis rexr is for restlet a = "this text is for text"; console.log(a.replace("t", "r")); //rhis text is for text이 문제를 해결하기 위해선 정규표현식을 사용해 console.log(a.replace(/t/g, "r"));이런 식으로 표현해야 했는데, 파이썬의 편리함을 느끼는 한 편, JS로 데이터 처리를 잘 하기 위해서 정규 표현식을 제대로 .. 2019. 9. 21.
[Javascript] ES6, let vs const, 호이스팅과 객체 리터럴, 디스트럭쳐링 기존 자바스크립트의 특징 함수 레벨 스코프 함수의 코드 블록만을 스코프로 인정하기 때문에 함수 외부에서 생성한 변수는 모두 전역 변수로 취급한다. 변수 호이스팅 변수를 선언하기 이전에 참조 가능하다. 위와 같은 특징은 변수의 유효 범위가 너무 커지기 때문에 에러의 발생 가능성을 높인다. 대부분의 프로그래밍 언어는 블록 레벨 스코프(if문, for문을 포함한 모든 코드 블록을 포함해 그 안에 작성된 모든 변수는 지역 변수로 생각된다. ) 인 반면 자바스크립트는 함수 레벨 스코프이기 때문에 함수 내에서 선언된 변수만 지역 변수에 해당한다. var example = 123; console.log(example); { var example = 456; } console.log(example); 위 코드를 실행시.. 2019. 9. 20.
처음 시작하는 Vue.js(3), 뷰 HTTP 통신과 데이터 바인딩 HTTP : 브라우저와 서버간에 데이터를 주고받는 통신 프로트콜 뷰에서는 이를 지원하기 위해 axios를 리소스를 지원한다. 뷰 리소스 방식 프레임워크 목록 가져오기 뷰 리소스가 1.5.2 버전인 현재는 위와 같이 하면 에러가 발생한다. ES6문법에 맞춰 다음과 같이 사용하자. 더 직관적인가? 잘 모르겠다. 프레임워크 목록 가져오기 엑시오스 방식 프레임워크 목록 가져오기 Data 속성이 일반 문자열이 아닌 객체 형식이기 때문에 별도로 JSON.parse()를 사용할 필요가 없다. 데이터 바인딩 데이터 바인딩 : html 화면 요소를 뷰 인스턴스와 데이터에 연결하는 것을 의미한다. v-once : 뷰 데이터가 변경되어도 값을 바꾸고 싶지 않을 때 사용함 v-bind : 아이디, 스타일, 클래스 등의 htm.. 2019. 9. 14.
처음 시작하는 Vue.js(2) 뷰 라우터 중첩 라우터부터 네임드 뷰까지 라우팅 라우팅이란 웹 페이지간의 이동 방법을 말한다. 라우팅은 현대 웹앱 형태 중 하나인 싱글 페이지 에플리케이션에서 주로 사용된다. 싱글 페이지 에플리케이션이란 서버에 웹 페이지를 요청하지 않고, 미리 해당 페이지를 받아 놓고 이동시에 클라이언트의 라우팅을 이용하여 화면을 갱신하는 패턴을 적용한 어플리케이션을 말한다. 뷰 뿐만 아니라 리엑트, 엥귤러는 모두 라우팅을 이용한 화면 전환을 지원하고 있으며 Fouc 현상이 일어나지 않아 화면을 더 빠르고 매끄럽게 전환할 수 있다. Route 예제 : 페이지 이동 태그, 화면에서는 태그로 치환된다. 페이지 표시 태그, 변경되는 url에 대한 해당 컴포넌트를 뿌려준다. $mount() : el 속성과 같이 인스턴스를 화면에 붙이는 역할을 한다. 생성하고 나서 $.. 2019. 9. 7.
[javascript] ES6 rest 파라미터와 Spread Syntax(전개 구문) REST 파라미터 Rest 파라미터는 매개변수 이름 앞에 세개의 점을 붙여 정의한 매개변수를 의미한다. Rest 파라미터의 특징은 특정 인수의 갯수를 지정할 필요가 없이 들어온 인수를 배열로 바꿔 전달받을 수 있다는 점이다. function example(...rest){ console.log(rest); } example(1,2,3,4,5,6); 함수에 전달된 인수들은 순서대로 파라미터와 rest 파라미터에 할당된다. function example(param1, param2, ...rest){ console.log(param1); console.log(param2); console.log(rest); } example(1,2,3,4,5,6); 또한 ES6 문법 중 하나인 화살표 함수에는 함수 객체의 a.. 2019. 9. 6.
[javascript] StopWatch를 통해 보는 시간지연함수 clearInterval(), setInterval() 타이머 함수라도고 불리는 setInterval()은 지정된 시간 간격으로 작업을 수행하기 위해 만들어진 함수이다. clearInterval은 실행중인 작업을 중지하는 게 아니라 주어진 작업을 모두 끝낸 후 다음 작업을 중지시키는 함수이다. HTML Stopwatch Vanilla JavaScript Stopwatch 00:00 Start Lap Stop Reset Javascript 초기세팅 var seconds = 00; var tens = 00; var appendTens = document.getElementById("tens") var appendSeconds = document.getElementById("seconds") var butto.. 2019. 9. 4.