본문 바로가기

JavaScript

[JS] 마우스를 방향에 따라 움직이는 HTML 오브젝트 마우스를 방향에 따라 움직이는 오브젝트 웹을 돌아다니다 보면 마우스를 이동할때 마우스 방향으로 오브젝트가 실시간으로 바라보고는 하는데요. 나중에 도움이 되지 않을까 싶어서 자바스크립트로 구현해 보았습니다. 오브젝트는 CSS속성 transform: rotate를 사용하여 각도 조절을 통해 마우스가 있는 방향으로 움직이게 합니다. See the Pen [JavaScript] 마우스를 따라가는 오브젝트 by junheeleeme (@junheeleeme) on CodePen. target인 화살표의 중심좌표를 기준으로 마우스 좌표에 따라 각도를 구해서 마우스가 이동할때마다 값을 넣어줍니다. 각도를 구할 때는 두 점 사이의 절대각도를 구하는 아크탄젠트를 사용한다. 수학공부 열심히 할걸.. atan2 함수는 두 .. 더보기
JSON(JavaScript Object Notation) 사용하기 1. JSON JSON은 자바스크립트에서 객체를 만들 때 사용하는 표현식을 말한다. JSON형식이라고 말을 하며 컴퓨터나 사람이 이해하기 쉬우며 데이터의 용량도 작아 최근에는 XML을 대신하여 JSON을 사용하기도 한다. 2. JSON API JSON.parse(str) : 문자열 파라미터를 자바스크립트의 객체로 만들어준다. JSON.stringify(ob) : 객체 파라미터를 JSON 포멧으로 바꿔준다. JSON은 서버와 통신하면서 주고받을때 문자열 형식으로 받아 다시 JSON형식으로 바꾸어 사용하기 위해 JSON.parse/stringify를 사용한다. var person = '{\ "number" : "01",\ "name" : "꾸생",\ "id" : "abcd1234"\ }'; var info .. 더보기
[JavaScript] AJAX/fetch api Ajax(Asynchronous JavaScript And XML) 고정적인 웹 문서를 넘어 새로고침없이 새로운 문서 내용을 반영하기 위한 방법이다. Ajax는 웹브라우저와 웹서버가 내부적으로 데이터 통신을 이루어 변경된 결과를 웹페이지에 반영하는 기술로, 비동기성의 장점을 보여주며 XMLHttpRequest 객체를 사용하여 JSON, XML, HTML,일반 텍스트 등 다양한 포맷을 주고받을 수 있다. 간단하게 말해 페이지 로딩없이 새로운 HTML 내용을 변경할 수 있다. Ajax 구현방법 JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server.. 더보기
[JS] 자바스크립트 append, prepend 사용법 자바스크립트 append() / prepend() fixed target을 기준으로 first는 append를 사용했고 second는 prepend를 사용하여 적용한 결과이다. 기존에 있었던 fixed는 가운데에 위치했고 prepend는 앞 쪽에, append는 뒤에 첨부되었다. target.parentNode.append(first); 이런식으로도 사용 가능 더보기
[JS] 자바스크립트로 테트리스 구현하기 See the Pen Tetris by junheeleeme (@junheeleeme) on CodePen. 유튜브 강의를 보면서 테트리스를 구현해보았지만 코드를 100% 이해하기 위해서 다시 처음부터 만들어야겠다.. 더보기
[JS] 자바스크립트 childNodes / children 자바스크립트를 이용하여 HTML요소의 자식 노드와 요소에 접근하는 방법으로 우선 HTML 노드와 요소의 차이점에 대해서 알아야한다. 노드에는 3개, Text와 Element, Comment가 포함되어 있습니다. Text : 의미대로 텍스트 문자열 Element : HTML 요소 Comment : 주석 1. 자식노드 접근 -> ele.childNodes 텍스트 childNodes는 배열의 형태로 노드를 순서대로 반환한다. 태그안 줄바꿈까지 Text로 처리되어 반환되므로 주의해야한다.. 2. 자식요소 접근 -> ele.children 텍스트 ele.children은 해당 HTML 요소의 자식요소를 배열의 형태로 반환한다. childNodes와는 다르게 주석이나 줄바꿈 또는 텍스트는 제외한다. 더보기
[JS] classList 속성 add, remove, contains, toggle 함수 자바스크립트 이벤트를 배울때 태그에 onClick 이벤트 속성을 자바스크립트 함수와 연결하여 사용했지만 이것은 효과적인 코딩 방법이 아니였다. HTML, CSS, JS는 각기다른 기능을 맡고 있기 때문에 연결되는 접점을 분리를 해주어야 효과적으로 관리할 수 있다. 이를 위해서 자바스크립트에서는 classList 함수를 사용하여 HTML 요소에 class 속성을 추가, 제거, 변경, 여부확인이 가능하다. JavaScript - Element.classList classList를 이용하여 해당 요소를 출력했을 때 DOMTokenList를 출력하며, 여기에는 배열의 형태로 클래스의 이름들이 저장되어있다. ele.classList.add(String) 해당 요소의 클래스 속성값을 추가, 같은 클래스명 있는 경우.. 더보기
자바스크립트 ES6 구조 분해 할당(Destructuring Assignment) 자바스크립트 구조 분해 할당은 배열 또는 객체의 속성 값을 개별로 담을 수 있는 표현식으로 perl이나 파이썬 등 다른 언어에서도 지원하는 기능이다. 1. 기본 변수 구조 분해 할당 let A, B; [A, B] = [123, 456]; console.log(A + '/' + C); // 결과 : 123/456 2. 배열 구조 분해 할당 let foo = ["one", "two", "three"]; let [one, two, three] = foo; console.log(one); // => "one" console.log(two); // => "two" console.log(three); // => "three" 한 번에 여러 변수를 선언하여 배열의 값을 순서대로 초기화 할 수 있다. let C = [.. 더보기

티스토리툴바