트위터 공유 버튼 만들기


트위터 공유 버튼을 통해 텍스트, 해쉬태그, URL, 트위터 계정을 미리 작성할 수 있습니다.

트위터 계정을 연결 하려면 트위터에서 팔로우 되어 있어야 합니다.




트위터 Content 파라메터


 파라메터

설명 

text

 트윗을 작성하기 전에 미리 텍스트를 작성합니다.

 url

 트윗에 URL을 연결합니다.

 hashtags

 트윗에 해쉬태그를 기본으로 등록 합니다.

 via

 특정 트윗 계정을 언급합니다. (댓글과 비슷합니다.)

 related

 공유 URL의 컨텐츠와 관련 계정을 쉼표로 구분하여 넣습니다.






버튼 디스플레이 파라메터

 파라메터

설명 

size

 large로 셋팅하면 큰 버튼을 볼 수 있습니다.

 lang

 트위터가 지원하는 언어코드를 적습니다.




HTML의 data-* 어트리뷰트를 이용한 예제


<a class="twitter-share-button"
  href="https://twitter.com/share"
  data-size="large"
  data-text="custom share text"
  data-url="https://dev.twitter.com/web/tweet-button"
  data-hashtags="example,demo"
  data-via="twitterdev"
  data-related="twitterapi,twitter">
Tweet
</a>


IFRAME 예제


<iframe
  src="https://platform.twitter.com/widgets/tweet_button.html?
size=l&
url=https%3A%2F%2Fdev.twitter.com%2Fweb%2Ftweet-button&
via=twitterdev&
related=twitterapi%2Ctwitter&
text=custom%20share%20text&hashtags=example%2Cdemo"
  width="140"
  height="28"
  title="Twitter Tweet Button"
  style="border: 0; overflow: hidden;">
</iframe>


자바스크립트 Factory 예제


twttr.widgets.createShareButton(
  "https:\/\/dev.twitter.com\/web\/tweet-button",
  document.getElementById("tweet-container"),
  {
    size: "large",
    text: "custom share text",
    hashtags: "example,demo",
    via: "twitterdev",
    related: "twitterapi,twitter"
  }
);


HTML 예제


<a href="https://twitter.com/share?
  url=https%3A%2F%2Fdev.twitter.com%2Fweb%2Ftweet-button&
  via=twitterdev&
  related=twitterapi%2Ctwitter&
  hashtags=example%2Cdemo&
  text=custom%20share%20text">
Tweet
</a>



어떤걸 써도 공유하기 기능은 할 수 있습니다.


디자인은 자유도 높게 바꿀 수 있습니다.

자바스크립트를 이용하여 체크박스 상태 가져오기



기본적인 자바스크립트 형태는 다음과 같습니다.


예제1 : pure javascript로 값 가져오기

var checked = document.getElementById("checkinfo1").checked;


위와 같이 작성하면 boolean형태의 값(true, false)을 반환 합니다.



제이쿼리로 작성하면 다음과 같습니다.



예제2: 제이쿼리(jQuery)로 값 가져오기

$('#checkinfo1').attr('checked'); // checked, null
//또는
$('#checkinfo1').prop('checked'); //true, false
//또는
$('#checkinfo1').is(':checked'); // true, false


위와 같이 여러가지 형태로 값을 가지고 올 수 있습니다.



예제3 : 제이쿼리(jQuery)를 이용하여 해당 엘리먼트(element) 조작하기

$('input:checked').each(function(i, el){
    console.log($(this).attr('id');
});



위와 같은 방법을 통해서  element 배열을 받아서 반복문을 사용할 수 있습니다.


반복문을 통해 직접 해당 element의 속성 등도 조작이 가능합니다.



예제4 : 전체 선택, 전체 해제


$("#all").click(function(e){
    $("input:checkbox").each(function(i, el){
    $(this).prop('checked', true);
  });
});

$("#all").click(function(e){
    $("input:checkbox").each(function(i, el){
    $(this).prop('checked', false);
  });
});



다음과 같은 체크박스예제를 활용하여 메일박스에 있는 check박스의 전체 선택/해제 등을 구현 할 수 있다.

'HTML+CSS+자바스크립트' 카테고리의 다른 글

[jQuery]ajax 예제  (0) 2017.12.03
자바스크립트 URL 인코딩  (0) 2017.11.28
checkbox 의 checked 속성  (0) 2017.11.27
HTML에서 특수문자 사용하기  (0) 2017.11.23
배열(array)이 이용하는 함수  (0) 2017.11.21

체크박스에 대해서...


셀렉트박스(select)와 라디오버튼(type="radio")의 엘리먼트들은 값을 한가지만 선택할 수 있는 반면에 체크박스는 여러개의 값을 선택할 수 있는 특징을 가지고 있습니다.


기본적인 체크박스의 형태는 다음과 같습니다.



<form method="POST" action="/regist">
    <input type="checkbox" name="chk_info" id="checkinfo1" value="value1">
    <label for="checkinfo1">value1</label>
    <input type="checkbox" name="chk_info" id="checkinfo2" value="value2">
    <label for="checkinfo2">value2</label>
    <input type="checkbox" name="chk_info" id="checkinfo3" value="value3">
    <label for="checkinfo3">value3</label>
</form>



그 중에 값이 check되어 있는 상태로 작성하고 싶으면 checked 속성을 사용합니다.


사용 예제는 아래와 같습니다.



<form method="POST" action="/regist">
    <input type="checkbox" name="chk_info" id="checkinfo1" value="value1" checked="checked">
    <label for="checkinfo1">value1</label>
    <input type="checkbox" name="chk_info" id="checkinfo2" value="value2">
    <label for="checkinfo2">value2</label>
    <input type="checkbox" name="chk_info" id="checkinfo3" value="value3" checked>
    <label for="checkinfo3">value3</label>
</form>



데이터가 전송될 때는 같은 name의 데이터가 사용되므로


위의 예제같은 경우에는

chk_info = "value1, value3"

이렇게 한개의 Key에 두개의 값이 , (콤마)로 구분되어 서버에 전송됩니다.




HTML 태그 안에서 특수문자 사용하기



HTML안에서 특수문자를 사용할 경우 HTML태그가 깨지는 경우가 발생 할 수도 있으므로 특수문자의 경우 치환해서 사용한다.


HTML안에서 자주 사용되는 특수문자는 아래와 같다.




 심볼

 HTML

&quot; 

 #

&num; 

$

&dollar; 

 %

&percnt;

 &

 &amp;

 '

&apos; 

 (

&lpar; 

 )

&rpar; 

 /

 &sol;

 :

&colon; 

 ;

 &semi;

 <

&lt; 

 >

 &gt;

 &equals;

 \

 &bsol;


예제

달라나 원화같이 통화를 HTML로 표현할 경우 위의 HTML을 찾아서 맡는 문자로 대체 하면 된다.



<html>
   <head>
      <title>특수문자 표시하기</title>
   </head>
   <body>
      <h3>한화로 표현하기</h3>
      <p>&bsol; 1,000</p>
      <h3>US 달러로 표현하기</h3>
      <p>&dollar; 1,000</p>
   </body>
</html>




<c:choose>


<c:choose>는 자바의 Switch문과 비슷한 역할을 합니다.


<c:when>

case와 같은 역할을 하는것은 <c:choose>안의 <c:when>태그 입니다.


<c:otherwise>

default문 같은 역할을 사용하고 싶으면 <c:shoose>태그 안에 <c:otherwise>태그를 사용합니다.


속성


<c:choose><c:otherwise> 는 속성을 사용하지 않습니다.


<c:when>은 test 속성을 사용합니다.(필수)


예제


숫자를 비교하여 HTML의 문장을 변경하는 예제이다.


<%@ taglib uri = "http://java.sun.com/jsp/jstl/core" prefix = "c" %>

<html>
   <head>
      <title>예제 example</title>
   </head>

   <body>
      <c:set var = "money" scope = "session" value = "${5000}"/>
      <p>내가 가진 돈은  : <c:out value = "${salary}"/>원 이다.</p>
      <c:choose>
         <c:when test = "${money<= 0}">
            돈 한푼도 없어요.
         </c:when>
         <c:when test = "${money > 5000}">
            담배 한갑정도 살 수 있어요.
         </c:when>
         <c:otherwise>
            답이 없네...
         </c:otherwise>
      </c:choose>
   </body>
</html>



'JAVA' 카테고리의 다른 글

[JAVA] 패스워드 정규식 (Regex)  (1) 2017.12.05
[JSP] jstl 과 el의 차이점  (0) 2017.12.04
[JSTL]fmt:formatNumber  (0) 2017.11.22
VO, Map 객체 JSON 으로 변환  (0) 2017.11.19
java의 map이나 VO 객체를 JSON으로  (1) 2017.11.17

<fmt:formatNumber>사용법


formatNumber는 숫자, 퍼센트, 돈단위를 작성할 때 사용한다.


formatNumber을 이용하여 숫자 단위마다 콤마 자동 찍기


formatNumber의 속성 중 type에 값을 number로 하면 3자리마다 콤마가 설정된다.
type의 속성 값에 할당 할 수 있는 값은 number, percentage, currency가 있다.

예제



<%@ taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix = "fmt" uri = "http://java.sun.com/jsp/jstl/fmt" %>

<html>
   <head>
      <title>formatNumber</title>
   </head>
   <body>
      <h3>단위마다 콤마 찍기</h3>
      <c:set var = "money" value = "25000" />
      <p>\<fmt:formatNumber value = "${money}" type = "number"/></p>
   </body>
</html>


formatNumber을 이용하여 통화 단위로 표현하기


type속성에 currency를 사용하면 돈 단위와 액수를 표현할 수 있다.


예제



<%@ taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix = "fmt" uri = "http://java.sun.com/jsp/jstl/fmt" %>

<html>
   <head>
      <title>formatNumber</title>
   </head>
   <body>
      <h3>한화로 표현하기</h3>
      <c:set var = "money" value = "25000" />
      <p><fmt:formatNumber value = "${money}" type = "currency" currencySymbol = "\"/></p>
      <h3>US 달러로 표현하기</h3>
      <fmt:setLocale value = "en_US"/>
      <p><fmt:formatNumber value = "${money}" type = "currency"/></p>
   </body>
</html>


위의 결과 값을 보면 

첫번째 한화로 표현현 값은

\25,000.00

두번째 US달러로 표현한 값은 

$25,000.00

으로 표현된다.

currency 는 소수점 두째자리까지 표현된다.


'JAVA' 카테고리의 다른 글

[JAVA] 패스워드 정규식 (Regex)  (1) 2017.12.05
[JSP] jstl 과 el의 차이점  (0) 2017.12.04
[JSTL]choose와 when, otherwise 사용법  (0) 2017.11.23
VO, Map 객체 JSON 으로 변환  (0) 2017.11.19
java의 map이나 VO 객체를 JSON으로  (1) 2017.11.17

자바스크립트 배열에서 새로운 요소를 추가 하는 방법


1. push()를 사용하여 배열 마지막에 요소 추가하기.


push()함수는 배열 제일 마지막에 새로운 요소를 추가 한다. 비슷한 함수인 pop()은 제일 마지막 요소를 제거 합니다.



예제코드 



var arr = ["hello", "world"]; list.push("javascript"); ["hello", "world", "javascript"] // result



여러개를 한번에 추가할 수 있습니다.



var list = ["hello", "javascript"];
list.push("angular", "react", "vue");
["hello", "javascript", "angular", "react", "vue"] // result


2. unshift()를 사용하여 배열 제일 앞에 요소 추가하기.


unshift()함수는 배열 제일 앞에 요소를 추가한다. 비슷한 함수인 shift()는 배열의 제일 앞의 요소를 제거 한다.


예제코드



var arr = ["hello", "world"];
list.unshift("javascript");
["javascript", "hello", "world"] // result



여러개를 한번에 추가 할 수도 있습니다.


3. splice()함수를 이용하여 배열 중간에 요소 추가하기.


splice()함수는 기존 배열의 요소를 제거하거나 새로운 요소를 추가한다.


예제코드



var list = ["hello", "world"];
list.splice( 1, 0, "javascript"); // 1번째 인덱스의 0개의 요소를 제거하고 그 자리에 "javascript" 요소를 추가한다.
                                 // "world"요소는 자동으로 2번째 인덱스로 이동 된다.
["hello", "javascript", "world"] // result



4. concat()함수를 이용하여 새로운 배열을 추가하기.


concat()함수는 배열과 인수에 포함된 배열이 합쳐진 새로운 배열을 반환한다.


예제코드



var list = ["hello", "world"];
var newlist = list.concat( ["hello1", "world1"] );
["hello", "world", "hello1", "world1"] // 새로운 배열을 반환



5. 배열 인덱스에 직접 할당하기


예제코드


var list = ["hello", "world"];
list[2] = "javascript";
["hello", "world", "javascript"] //결과

list[list.length] = "!!!!";

["hello", "world", "javascript", "!!!!"] //결과


여러가지 매서드를 활용하여 배열을 가지고 놀아보자.

이미지를 favicon으로 변환해주는 싸이트들.


https://www.favicon-generator.org/


http://faviconit.com/en


http://www.favicomatic.com/


위의 싸이트에서 이미지를 favicon으로 변환하여 홈페이지에 적용한다.


홈페이지 적용방법은 헤더에 아래 태그를 붙여넣기 하면 된다.



<link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />



꼭 ico파일이 아니더라도


16 * 16 의 png파일로도 적용이 가능하다.



적용하는 헤더의 태그는 아래와 같다.



<link rel="shortcut icon" type="image/png" href="/img/favicon.png"/>
<link rel="shortcut icon" type="image/png" href="http://www.image.com/favicon.png"/>



위의 내용을 이용하여 홈페이지에 적용해 보도록 하자.

제이쿼리를 쓰다보면 찾은 객체에서 여러 객체를 찾아가게 되는 경우가 종종 생깁니다.


이 때 좋은 api 중 하나가 closest()입니다.


closest(selector)

선택된 element에서 selector로 고를 가장 가까운 부모 엘리먼트를 반환합니다.



예제는 

li객체의 텍스트를 클릭하면 백그라운드가 파란색으로 바뀐다.





위와 같이 부모 객체를 찾는 유용한 API다.


jquery의 parents() API와 가장 큰 차이점은


하나의 객체만 반환한다는 점이다.


parents() API의 경우 여러개의 반환값으로 인해 loop를 이용하거나 특정 index를 선택해서 사용했지만 closest는 단 하나의 객체만 반환 하므로 그럴필요가 없다.


parent() API의 경우는 직계부모의 객체만 해당 되므로 다음과 같은 예제에는 사용할 수 없다.





위의 사항을 유의 하면서 parent(), parents(), closest()를 유용하게 사용해 보자.


VO객체에서 JSON으로 변환하기



google-gson

GSON은 구글의 오픈소스 라이브러리로 자바의 Object객체를 JSON으로 변환해 준다.

GSON을 이용하면 다음과 같다.



Map<String, Object> data = new HashMap<String, Object>();
data.put( "result", "success" );
data.put( "message", "ok" );
data.put( "statusCode", 200 );
JSONObject json = new JSONObject();
json.putAll( data );
System.out.printf( "JSON: %s", json.toString(2) );




Jackson Project

Jackson 라이브러리 역시 JSON 변환이 가능하다.


Jackson을 이용하면 다음과 같다.



Map<String, Object> data = new HashMap<String, Object>();
data.put( "result", "success" );
data.put( "message", "ok" );
data.put( "statusCode", 200 );
String json = new ObjectMapper().writeValueAsString(data);
System.out.println(json);



두 라이브러리 모두 Map 대신에 VO객체도 가능하다.



취향에 맞게 골라 쓰면 된다.



'JAVA' 카테고리의 다른 글

[JAVA] 패스워드 정규식 (Regex)  (1) 2017.12.05
[JSP] jstl 과 el의 차이점  (0) 2017.12.04
[JSTL]choose와 when, otherwise 사용법  (0) 2017.11.23
[JSTL]fmt:formatNumber  (0) 2017.11.22
java의 map이나 VO 객체를 JSON으로  (1) 2017.11.17

+ Recent posts