0. 요소에 속성 추가/수정하기 요소에 속성을 추가/수정하기 위해 setAttribute() 함수를 사용한다. 요소에 해당 속성이 없다면 속성을 새로 추가하고 동일한 속성이 이미 존재한다면 해당 속성을 새로운 속성값으로 수정한다. let targetElem = document.querySelector('#target'); targetElem.setAttribute('readonly', 'true'); 1. 요소의 속성 삭제하기 요소의 속성을 삭제하기 위해 removeAttribute() 함수를 사용한다. let targetElem = document.querySelector('#target'); targetElem.removeAttribute('readonly'); 2. 요소의 속성값 가져오기 요소의 속..
0. fetch() fetch() 함수는 HTTP 요청 전송 기능을 제공하는 Web API이다. XMLHttpRequest보다도 최근에 나온 기능이라고 한다. fetch() 함수를 사용해 GET, POST 이외에도 PUT, DELETE 등 REST API와 사용할 수 있는 방식 또한 제공한다. 1. GET fetch() 함수의 기본 요청 방식은 GET으로 간단한 구조를 가져 쉽게 사용할 수 있다. fetch("/test") .then((res) => res.json()) .then((data) => console.log(data)) * fetch() 함수가 가져오는 응답 데이터 fetch() 함수를 통해 가져오는 응답 데이터는 프로미스(promise)라는 비동기 처리를 위한 객체이다. 이를 다른 데이터 ..
0. textarea에 입력된 \r\n을 로 변환 textarea에 입력된 문자열은 개행문자로 \r\n을 갖지만 이를 HTML의 텍스트 노트로 출력하기 위해서는 태그로 변환해주어야 한다. 자바스크립트의 replace() 함수를 사용해 다음과 같이 문자열에 있는 \r\n 문자를 로 바꿔줄 수 있다. function processText(target){ let content = target.boardContent.value; content = content.replace(/(\n|\r\n)/g, ' '); target.boardContent.value = content; } 1. 문자열의 을 \r\n으로 변환하여 textarea에 입력 반면에 게시글을 수정하기 위해 데이터베이스에 저장된 문자열을 다시 tex..
브라우저에서 이미지 파일 같은 경우에는 클릭 후 드래그를 하면 이미지가 커서에 딸려 움직이는 것을 볼 수 있다. 이를 방지하기 위해서는 드래그를 방지할 영역에 ondragstart를 사용해주면 된다. ~ 드래그 금지 영역 ~
자바스크립트에서 우클릭을 이벤트로 주기 위해서는 다음과 같은 설정들이 필요하다. 1. oncontextmenu 설정 브라우저에서 우클릭하면 팝업메뉴가 뜨는 것이 기본 설정이다. 이를 방지하기 위해 우클릭 이벤트를 주고자하는 영역에 oncontextmenu="false" 라는 속성을 적용해야한다. 속성을 적용한 후 우클릭을 하면 더 이상 팝업메뉴가 뜨지 않는 것을 알 수 있다. 2. 이벤트는 'mousedown'을 사용 마우스 우클릭에 이벤트를 주기 위해서는 'mousedown' 이벤트를 주어야한다. 'click' 이벤트의 경우 마우스 좌클릭에 대한 이벤트이기 때문에 우클릭에서는 사용할 수 없다. 3. 이벤트가 발생한 마우스 구분하기 이제 'mousedown' 이벤트가 발생했을 때 좌클릭인지 우클릭인지 구..
자바스크립트에서 문자열을 html로 변환하여 DOM에 삽입하는 방법은 두 가지가 있다. 1. innerHTML 첫 번째는 innerHTML이다. innerHTML에 html 형식의 내용이 담긴 문자열을 대입하면 html 태그가 파싱되어 페이지에 삽입된다. element.innerHTML = '삽입 문자열'; 2. insertAdjacentHTML() 두 번째는 insertAdjacentHTML 이다. 위의 innerHTML와 같은 역할을 하지만 html이 삽입될 위치를 정할 수 있다는 점이 다르다. insertAdjacentHTML은 파라미터로 2개의 값을 받는다. element.insertAdjacentHTML("삽입 위치", "삽입 문자열"); 삽입 위치는 총 4가지 위치가 존재한다. beforebe..
자바스크립트의 XMLHttpRequest를 사용해 서버와 비동기 통신(AJAX)을 할 수 있다. var xhr = new XMLHttpRequest(); xhr.open('post', '/job'); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.send(JSON.stringify({ 'e_id' : 'E101' })); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); } } 1. XMLHttpRequest 객체를 생성한다. 2. open()에 통신에 사용할 방식(method)과..
ES7에서 지수 연산자가 도입되었다. 이전까지 사용해 온 Math.pow 메서드를 대신해 좀 더 가독성 좋은 코드를 작성할 수 있게 되었다. 지수 연산은 별 두 개( ** )로 수행할 수 있다. 좌항의 피연산자가 밑이 되고 우항의 피연산자는 지수가 된다. console.log(2 ** 2); // 4 console.log(2 ** 0); // 1 console.log(2 ** -2); // 0.25 음수가 밑이 되는 경우 괄호로 묶어야한다. console.log((-5) ** 2); // 25 할당 연산자와 함께 사용할 수도 있다. a = 10; console.log(a **= 2); // 100 또한 지수 연산자의 우선순위는 이항 연산자 중에서 가장 높다. console.log(2 * 2 ** 2); ..
