jQuery

JQuery는 조금 더 간결하게 javascript를 작성하게 도와줍니다. 선택사항입니다. JQuery를 사용하기 위해서는 반드시 jquery가 먼저 불려야 합니다. 

// JQuery를 사용하겠다는 선언
<script src="https://code.jquery.com/jquery-latest.min.js"></script>

querySelector

<table id="data-news">
  <tr>
    <td></td>
    <td>여기</td>
  </tr>
<table>

javascript로 구현한다면 다음과 같습니다. 

var lastTd =document.querySelector("#data-news tr>td:last-child");
lastTd.style.backgroundColor = "red";
lastTd.style.fontSize = "1.1em";

jQuery를 사용한다면 다음과 같습니다. 

 // JQuery
$("#data-news tr>td:last-child").css({backgroundColor: "red", fontSize: "1.1em"});
E_tips >> a_jQuery.html

생성하기

querySelector가 객체를 반환하기 때문에 이어붙여서 사용 할 수 있습니다.

tag로 검색하였기 때문에 1개짜리 배열로 취급하여, 배열[0]을 붙여서 접근합니다. 

// 방법1
var header = document.createElement('header');
$("body")[0].appendChild(header);

// 방법2
var header = $("
");
$("body")[0].appendChild(header);

// 방볍3
$("body").append("
test1
");

속성 편집

$("myQuery").addClass("hide"); // 클레스 추가
$("myQuery").removeClass("hide"); // 클래스 제거
if ($("myQuery").hasClass("hide")) { ... } // 클래스 확인

$("#myDiv").attr({ "attr1": "value1", "attr2": "value2"}); // 속성 작성
$("#myDiv").removeAttr("attr1"); // 속성 제거
if ($("#myDiv").attr("attr1") === "value1") { ... } // 속성 확인
E_tips >> a2_jQueryEdit.html

화면 스크롤

아래 코드는 일정 스크롤이 내려갔을 때, 해당 element를 숨기는 기능을 합니다. 

$(window).scroll(function () {
  var scrollTop = $(this).scrollTop(); // 스크롤바 수직 위치를 가져옵니다
  if (scrollTop > 200) {
    $("#pannel").css({ visibility: "hidden" });
  }
});

소스코드 예쁘게..

https://highlightjs.org/에서 링크를 얻거나, 패키지를 다운받아 서버에 복사하는 방식으로 진행 할 수 있습니다. 아래 방식은 페키지를 다운받아 진행한 형식에서의 예시를 보여줍니다. 

<!-- 소스코드 스타일 -->
<link rel="stylesheet" href="/highlight/styles/base16/cupertino.min.css-light.min.css" />
<script src="/highlight/highlight.min.js"></script>
<script src="/highlight/highlightjs-line-numbers.js"></script>
<script>
  hljs.highlightAll();
  hljs.initLineNumbersOnLoad();
</script>

classic-light.min.css를 변경하면 스타일을 변경 할 수 있습니다. 페이지 내에 다음과 같이 코드를 삽입할 수 있습니다. 

<pre>
  <code class="language-javascript">
    ...
  </code>
</pre>

방문자 기록

기본 설정

구글 analytics을 이용하면 방문자 집계를 할 수 있습니다.

  1. 회원 가입을 하고, 속성을 생성한다.
  2. google태그를 가져온다.
    1. 설정(좌하단 톱니모양)
    2. 속성 > 데이터 스트림 선택
    3. 세부 데이터 스트림 선택(본인이 작성한 아이템)
    4. Google 태그에서, '태그 안내보기' 선택
    5. 직접 설치에서 아래와 같은 태그를 복사
    <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-**********"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() { dataLayer.push(arguments); }
  gtag('js', new Date());

  gtag('config', 'G-**********');
</script>
  3. 모든 페이지에 첨부한다.
  4. 구글 analytics에 접속하여 보고서를 확인한다.

내 트래픽 빼기

[내부 트래픽 제외하기 - 애널리틱스 고객센터]
[Filter out internal traffic]: 공식 안내 동영상

필터 생성하기
  1. 관리(좌하단 톱니) > 속성설정 > 데이터 수집 및 설정 > 데이터 스트림
  2. 데이터 스트림에서 제어하고자하는 스트림 선택
  3. Google 태그 > 태그 설정 구성
  4. 설정 > 자세히 보기 > 내부 트래픽 정의
  5. 정보 입력
    • 규칙 이름 "예: developer"
    • traffic_type: "예(default): internal"
    • IP주소(내 IP 주소 알아보기 주소): "[XXX.XXX.XXX.XXX/24](http://xxx.xxx.xxx.xxx/24)"설정
  6. 저장
필터 적용하기
  1. 관리(좌하단 톱니) > 속성설정 > 데이터 수집 및 설정
  2. 정보 입력
    • 데이터 필터 이름: "예: developer"
    • traffic_type: "예(default): internal"
    • 필터 상태: "사용중"