'Web/자바스크립트' 카테고리의 글 목록

on( )

jQuery는 특정 요소에 이벤트 바인딩(event binding)하기 위해 .on()를 사용한다.

(bind() 대신 사용 가능)

기본형

$("p").on("click", function(){
 alert("문장이 클릭되었습니다.");
});

이벤트 핸들러 하나에 이벤트를 여러개 설정

$("p").on("mouseenter mouseleave", function() {
  $("div").append("마우스 커서가 문장 위로 들어오거나 빠져 나갔습니다.<br>");
});

또한, 하나의 요소에 여러 개의 이벤트 핸들러를 사용하여 여러 개의 이벤트를 같이 바인딩할 수도 있다.

$("p").on({ 
  click: function() {
    $("div").append("마우스가 문장을 클릭했습니다.<br>");
  },
  mouseenter: function() {
    $("div").append("마우스가 커서가 문장 위로 들어왔습니다.<br>");
  },
  mouseleave: function() {
    $("div").append("마우스가 커서가 문장을 빠져 나갔습니다.<br>");
  }
});

off( )

.off()는 더 이상 사용하지 않는 이벤트와의 바인딩(binding)을 제거한다.

$("#btn").on("click", function() {
  alert("버튼을 클릭했습니다.");
});
$("#btnBind").on("click", function() {
  $("#btn").on("click").text("버튼 클릭 가능");
});
$("#btnUnbind").on("click", function() {
  $("#btn").off("click").text("버튼 클릭 불가능");
});

one( )

one()는 바인딩(binding)된 이벤트 핸들러가 한번만 실행되고 나서는, 더는 실행되지 않는다.

$("button").one("click", function() {
  $("div").append("이제 클릭이 되지 않습니다.<br>");
});

저작자표시 비영리

'Web > 자바스크립트' 카테고리의 다른 글

querySelector() / querySelectorAll() 사용법 (0)	2022.03.29
innerText / innerHTML 비교 (0)	2022.03.29
[javascript] var hoisting (0)	2021.05.27
[javascript] use strict (strict mode) (0)	2021.05.26
[javascript] asyn, defer 비교 (0)	2021.05.26

querySelector

dom 요소를 하나만 선택할 때 사용한다.

해당 요소의 속성을 변경하거나, 자식 / 부모 관계로 Element를 만들 때 주로 사용된다.

예제1

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>JavaScript</title>
  </head>
  <body>
    <p class="abc">Lorem Ipsum Dolor</p>
    <p class="abc">Lorem Ipsum Dolor</p>
    <p class="abc">Lorem Ipsum Dolor</p>
    <script>
      document.querySelector( '.abc' ).style.color = 'red';
    </script>
  </body>
</html>

예제2

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>JavaScript</title>
  </head>
  <body>
    <p class="abc">Lorem Ipsum Dolor</p>
    <div>
      <p class="abc">Lorem Ipsum Dolor</p>
      <p class="abc">Lorem Ipsum Dolor</p>
    </div>
    <script>
      document.querySelector( 'div .abc' ).style.color = 'red';
    </script>
  </body>
</html>

querySelectorAll

해당되는 모든 요소를 nodeList(배열)로 반환한다.

예제1

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>JavaScript</title>
  </head>
  <body>
    <p class="abc">Lorem Ipsum Dolor</p>
    <p class="abc">Lorem Ipsum Dolor</p>
    <p class="abc">Lorem Ipsum Dolor</p>
    <script>
      var jb = document.querySelectorAll( '.abc' );
      jb[1].style.color = 'red';
    </script>
  </body>
</html>

예제2

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>JavaScript</title>
  </head>
  <body>
    <p class="abc">Lorem Ipsum Dolor</p>
    <p class="abc">Lorem Ipsum Dolor</p>
    <p class="abc">Lorem Ipsum Dolor</p>
    <script>
      var jb = document.querySelectorAll( '.abc' );
      for ( var i = 0; i < jb.length; i++ ) {
        jb[i].style.color = 'red';
      }
    </script>
  </body>
</html>

저작자표시 비영리

'Web > 자바스크립트' 카테고리의 다른 글

jquery 이벤트 처리 on() / off() / one() (0)	2022.03.30
innerText / innerHTML 비교 (0)	2022.03.29
[javascript] var hoisting (0)	2021.05.27
[javascript] use strict (strict mode) (0)	2021.05.26
[javascript] asyn, defer 비교 (0)	2021.05.26

값 가져오기 (innerText vs innerHTML)

이 두 속성은 다루는 값이 text element인지, html element인지에 따라 사용법이 다르다.

<div id='content'>
  <div>A</div>
  <div>B</div>
</div>

<input 
  type='button' 
  value='innerText()'
  onclick='getInnerText()' />
<input 
  type='button' 
  value='innerHTML()' 
  onclick='getInnerHTML()' />

function getInnerText()  {
  const element = document.getElementById('content');
  alert(element.innerText);
  // A
  // B
}

function getInnerHTML()  {
  const element = document.getElementById('content');
  alert(element.innerHTML);
  // <div>A</div>
  // <div>B</div>
}

element.innerText;

이 속성은 element 안의 text 값들만을 가져옵니다.

element.innerHTML;

innerText와는 달리 innerHTML은 element 안의 HTML이나 XML을 가져옵니다.

값 설정하기 (innerText vs innerHTML)

<div id='content'>
</div>

<input 
  type='button' 
  value='innerText()'
  onclick='setInnerText()' />
<input 
  type='button' 
  value='innerHTML()' 
  onclick='setInnerHTML()' />

function setInnerText()  {
  const element = document.getElementById('content');
  element.innerText = "<div style='color:red'>A</div>";
} 
// <div style='color:red'>A</div>



function setInnerHTML()  {
  const element = document.getElementById('content');
  element.innerHTML = "<div style='color:red'>A</div>";
}
// A

<- innerText() 버튼 클릭

<- innerHTML() 버튼 클릭

element.innerText = "<div style='color:red'>A</div>";

element.innerText에 html을 포함한 문자열을 입력하면,

html코드가 문자열로 element안에 포함되어 문자열이 html 코드라도 html코드로서 적용이 되지 않는다.

(단순한 문자열로 해당 element 안에 삽입)

element.innerHTML = "<div style='color:red'>A</div>";

위와 같이 element.innerHTML 속성에 html코드를 입력하면,

html 코드가 적용이 되어 해당 element 안에 적용 된다.

위 예제에서 'innerHTML()'을 클릭하면,

입력된 html태그가 해석되어 빨간색A 가 나타나는 것을 확인 할 수 있다.

저작자표시 비영리

'Web > 자바스크립트' 카테고리의 다른 글

jquery 이벤트 처리 on() / off() / one() (0)	2022.03.30
querySelector() / querySelectorAll() 사용법 (0)	2022.03.29
[javascript] var hoisting (0)	2021.05.27
[javascript] use strict (strict mode) (0)	2021.05.26
[javascript] asyn, defer 비교 (0)	2021.05.26

hoisting이란 변수, 함수 선언을 최상단으로 끌어 올린다는 것이다. 즉 런타임시 어떤 변수를 출력하는데 변수선언이 되어있지 않음에도 불구하고 오류가 나지 않는다는 것이다. 예를 들어보자

console.log(a);
var a = 1;
console.log(a);

위의 경우 변수 a를 선언하기도 전에 콘솔 창에 a를 출력하도록 했다. 원래대로라면 오류가 나야 정상이지만 자바스크립트에서 var 로 변수를 선언하게 되면 hoisting이라는 특성 때문에 오류가 나지않는다 즉, 최상단에서 변수선언이 이루어 진 것이다. 때문에 변수 선언문 다음의 콘솔출력은 정상적으로 1이 출력되는 것을 볼 수 있다.

이러한 hoisting은 다른언어를 공부한 사람들에게는 정말 미친(?) 개념이 아닐 수 없다. 이러한 오류를 줄이기 위해 변수 선언시 let을 사용하는 것이 좋다.

이러한 hoisting은 var에서 일어나는 현상이다.

console.log(a);
let a = 1;
console.log(a);

같은 코드에서 변수선언을 let으로 해보았다. 콘솔창에서 오류가 발생하는 것을 알 수 있다. 이것이 정상적인 것이다...

let은 ES6에서 추가가 되었는데 chrome에서는 호환이 잘 되기 때문에 문제없이 사용가능하다.

문제많은 var를 사용할 이유가 없다.

또 var를 사용하면 안되는 이유가 있다.

{ }스코프에 영향을 받지 않는다. (이것도 정말 미친것같다...)

{
    var a = 1;    
}
console.log(a);

위 코드를 보면 변수 a는 스코프 안에서 var를 통해 선언되었고 1을 할당 받았다. 그리고 스코프 밖에서 a를 출력한다. 정상적이라면 오류가 나야 정상이다. 하지만..

이렇게 스코프를 무시하고 1을 출력하는 것을 볼 수 있다. (정말 문제가 많은 녀석이다...)

하지만 let을 사용하면

{
    let a = 1;    
}
console.log(a);

이렇게 정상적으로 오류가 나는 것을 볼 수 있다. (이게 지극히 정상이다..)

결론 : 변수선언시 let을 사용하는 것이 바람직하다

저작자표시 비영리

'Web > 자바스크립트' 카테고리의 다른 글

jquery 이벤트 처리 on() / off() / one() (0)	2022.03.30
querySelector() / querySelectorAll() 사용법 (0)	2022.03.29
innerText / innerHTML 비교 (0)	2022.03.29
[javascript] use strict (strict mode) (0)	2021.05.26
[javascript] asyn, defer 비교 (0)	2021.05.26

순수 바닐라 자바스크립트를 사용할땐 use strict을 선언하는 것이 좋음

자바스크립트 언어는 굉장이 유연한 언어이다. 유연하다는 것은 아주 위험하기도 하다는 것이다.

이는 개발자가 많은 실수를 할 수 있다는 것을 의미한다. 자바스크립트에서는 선언되지 않은 변수의 값을 할당 한다던지 아니면 기존에 존재하는 프로토타입을 변경한다든지 이런 비상식적인 것들은 다른언어를 공부하고 온 개발자들이 봤을 때 미친 것들이다... use strick는 ECMAScript5 에 추가되어 있다. 그래서 use strict를 선언하면 비상식적인 행위들을 할 수 없게된다. 즉 비상식적인 오류들을 줄일 수 있다는 것이다.

저작자표시 비영리

'Web > 자바스크립트' 카테고리의 다른 글

jquery 이벤트 처리 on() / off() / one() (0)	2022.03.30
querySelector() / querySelectorAll() 사용법 (0)	2022.03.29
innerText / innerHTML 비교 (0)	2022.03.29
[javascript] var hoisting (0)	2021.05.27
[javascript] asyn, defer 비교 (0)	2021.05.26

html로 자바스크립트를 불러올 때 여러가지 방법으로 코드를 가져올 수 있는데 asyn와 defer 속성을 사용하는 것이 이에 해당된다. asyn와 defer말고도 다른 가능한 경우들도 코드를 보면서 차근차근 설명해보겠다.

위 코드에는 html을 쭉 parsing 하다가 script tag가 보이면 main.js를 다운받는다. 이때 parsing을 잠시 멈추고 필요한 자바스크립트 파일을 서버에서 다운받아 실행한 다음에 parsing하는 부분으로 넘어간다 이때 단점은 js파일이 용량이 크면 속도에 많은 지장을 준다. 따라서 사용자의 속도가 느려진다. 이 때문에 script를 head에 넣는것은 좋은 습관이 아니다.

그리고 위코드처럼 body안 끝부분에 script를 추가하는 경우가 있는데 이 경우는 html을 다운받아 쭉 parsing하면서 페이지가 준비가 된 다음에 script를 만나게 되면 서버에서 script를 받아오고 실행하게 된다. 그래서 js를 받기도 전에 페이지가 사용자들에게 준비가 되면서 사용자가 페이지의 컨텐츠를 볼 수 있다. 이 방법은 사용자가 기본적인 html의 컨텐츠를 빨리 본다는 장점은 있지만 웹사이트가 자바스크립트에 의존적이라면 즉, 사용자가 의미있는 컨텐츠를 보기위해서 자바스크립트를 이용해서 서버에 있는 데이터를 받아와야하는 경우의 웹사이트라면 사용자가 정상적인 페이지를 보기전까지는 fetching하는, 그러니까 서버에서 자바스크립트를 받아오는 시간을 기다려야되고 실행하는 시간도 기다려야하는 단점이 있다.

그리고 위의 경우는 head안에 script를 이용하되 asyn라는 속성값을 사용하는 것이다. asyn는 boolean타입의 속성값이기 때문에 이렇게 선언하는 것만으로도 true로 설정이되어 asyn옵션을 사용가능하다. asyn를 사용하면 브라우저가 html을 다운받아 parsing 하다가 asyn를 발견하면 병렬로 main.js를 다운받으라는 명령을 내려놓고 다시 parsing을 하다가 main.js가 다운완료되면 그때 parsing하는 것을 멈추고 다운로드된 js파일을 실행한다. 이렇게 실행하고 나서 나머지 html을 parsing한다.

이 경우 body끝에 사용하는 것보다 fetching이 parsing하는 동안 병렬적으로 일어나기 때문에 다운로드 받는 시간을 절약할 수 있다. 하지만 자바스크립트가 html이 parsing 되기도 전에 실행이 되기때문에 만약 js파일에서 query selector를 이용해서 DOM요소를 조작하려 한다면 이 조작하려하는 시점에 html이 우리가 원하는 요소가 아직 정의 되어 있지 않을 수 있다. 이 부분이 조금 위험할 수 있다. html을 parsing하는 동안에 언제든지 js를 실행하기 위해서 멈춰질수 있기 때문에 사용자가 페이지를 보는데에 시간이 조금 걸릴 수 있는 단점이 있다.

이 경우는 defer을 사용하는 것이다. 앞에서와 마찬가지로 head안에 script를 넣고 정의하는데 이 경우는 parsing 하다가 script에 defer를 보고 main.js 다운 명령만 시켜놓고 나머지 html을 끝까지 parsing한다. 그리고 마지막에 parsing이 끝난 다음에 다운로드된 main.js를 실행한다. 때문에 defer를 사용하는 것이 가장 좋은 옵션이라고 할 수 있다.

html을 parsing하는 동안 js파일을 다운받아 놓고 html parsing을 먼저해서 사용자에게 페이지를 보여준 다음에 js를 실행하기 때문이다.

그리고 위의 경우는 asyn옵션으로 다수의 script를 다운받으면 먼저 다운되는 것을 먼저 실행되고 다음에 다운완료되는 것이 실행되기 때문에 순서에 의존적인 자바스크립트라면 문제가 될 수 있다.

위 코드와 같은 상황에서 defer같은 경우는 parsing하는 동안 필요한 script를 모두 다운받아 놓고 순서대로 실행하기 때문에 정리한 순서대로 실행이 된다.

* 종합해보면 가장 마지막 경우와 같이 head 안에 defer옵션을 이용해서 가장 효율적이고 안전하다고 볼 수 있다.

저작자표시 비영리

'Web > 자바스크립트' 카테고리의 다른 글

jquery 이벤트 처리 on() / off() / one() (0)	2022.03.30
querySelector() / querySelectorAll() 사용법 (0)	2022.03.29
innerText / innerHTML 비교 (0)	2022.03.29
[javascript] var hoisting (0)	2021.05.27
[javascript] use strict (strict mode) (0)	2021.05.26

기억보단 기록을