반응형
반응형

*  li에서 텍스트 추출, 공백제거


$(function(){
    var value1 = '      abc     ';
    var value2 = $(":text").val();
    //공백제거 전
    alert("value1 : " + value1+"\n"+"value2 : " + value2);
     
    value1 = $.trim(value1);
    value2 = $.trim(value2);
    //공백제거 후
    alert("value1 : " + value1+"\n"+"value2 : " + value2);
})

<!doctype html>
<html lang="ko">
 <head>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <meta http-equiv="Content-Type" content="text/html";charset="utf-8"/>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
	ul{list-style-type: none;}
  </style>
 </head>
 <body>

  <ul id="menu1">
	<li>철수1</li>
	<li>영희1</li>
	<li>길동1</li>
	<li>둘리1</li>
  </ul>

  <ul id="menu2">
	<li>철수2</li>
	<li>영희2</li>
	<li>길동2</li>
	<li>둘리2</li>
  </ul>
  

   <script>	
   $("#menu2 li").each(function( index, element ) {
     console.log($(this).text());
   });
  </script>

 </body>
</html>
반응형
저작자표시 비영리 (새창열림)

'프로그래밍 > Script' 카테고리의 다른 글

jquery keyup, keydown, keypress 차이  (0) 2023.07.03
document.ready() vs window.load() 차이  (0) 2023.07.03
[jQuery] jQuery .data()  (0) 2023.05.30
[javascript] 화면 리사이즈시 사이즈 확인 및 미디어쿼리 확인  (0) 2023.05.26
[javascript] 엔터키 입력 이벤트, KeyboardEvent keyCode  (0) 2023.05.26
반응형

https://api.jquery.com/data/

 

.data() | jQuery API Documentation

Description: Return arbitrary data associated with the first element in the jQuery collection, as set by data() or by an HTML5 data-* attribute. The .data() method allows us to read data previously associated with DOM elements. We can retrieve several dist

api.jquery.com

일치하는 요소와 연결된 임의의 데이터를 저장하거나 일치하는 요소 집합의 첫 번째 요소에 대한 명명된 데이터 저장소의 값을 반환합니다.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>data demo</title>
  <style>
  div {
    color: blue;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<div>
  The values stored were
  <span></span>
  and
  <span></span>
</div>
 
<script>
$( "div" ).data( "test", { first: 16, last: "pizza!" } );
$( "span" ).first().text( $( "div" ).data( "test" ).first );
$( "span" ).last().text( $( "div" ).data( "test" ).last );
</script>
 
</body>
</html>

https://jsfiddle.net/mill01/moegwyp3/

 

jquery .data() - JSFiddle - Code Playground

 

jsfiddle.net

반응형
저작자표시 비영리 (새창열림)

'프로그래밍 > Script' 카테고리의 다른 글

document.ready() vs window.load() 차이  (0) 2023.07.03
[jQuery] jQuery .each , $.trim li에서 텍스트 추출, 공백제거  (0) 2023.06.23
[javascript] 화면 리사이즈시 사이즈 확인 및 미디어쿼리 확인  (0) 2023.05.26
[javascript] 엔터키 입력 이벤트, KeyboardEvent keyCode  (0) 2023.05.26
[VS Code] 인코딩 변경  (0) 2023.05.09
반응형

화면 리사이즈시 사이즈 확인 및 미디어쿼리 확인

 

Typical Media Query Breakpoints

https://jsfiddle.net/mill01/1jedsc76/8/

 

media queries - JSFiddle - Code Playground

 

jsfiddle.net

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>

.example {
  padding: 20px;
  color: white;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .example {background: red;}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .example {background: green;}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .example {background: blue;}
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .example {background: orange;}
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .example {background: pink;}
}
</style>
<script>
$( window ).resize(function() {
   //창크기 변화 감지
   var windowWidth = $( window ).width();
   $("#width_size").val(windowWidth);
});
</script>
</head>
<body>

<h2>Typical Media Query Breakpoints</h2>
<input type="text" id="width_size" >
<p class="example">Resize the browser window to see how the background color of this paragraph changes on different screen sizes.</p>

</body>
</html>

반응형
저작자표시 비영리 (새창열림)

'프로그래밍 > Script' 카테고리의 다른 글

[jQuery] jQuery .each , $.trim li에서 텍스트 추출, 공백제거  (0) 2023.06.23
[jQuery] jQuery .data()  (0) 2023.05.30
[javascript] 엔터키 입력 이벤트, KeyboardEvent keyCode  (0) 2023.05.26
[VS Code] 인코딩 변경  (0) 2023.05.09
[ javascript ] CDATA 사용 이유  (0) 2023.05.08
반응형

KeyboardEvent keyCode

<!DOCTYPE html>
<html>
<body>
<h1>Keyboard Events</h1>
<h2>The keyCode Property</h2>

<p>Press a keyboard key in the input field and display the value:</p>

<input type="text" size="40"   onkeypress="myFunction(event)">

<p id="demo"></p>
<p>The keyCode property is deprecated, use the key property instead.</p>

<script>
function myFunction(event) {
  let value= event.which;
  document.getElementById("demo").innerHTML = value;
}  
</script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	$("#inp").keypress(function(e){
		//검색어 입력 후 엔터키 입력하면 조회버튼 클릭
		if(e.keyCode && e.keyCode == 13){
			$("#btn").trigger("click");
			return false;
		}
		//엔터키 막기
		if(e.keyCode && e.keyCode == 13){
			  e.preventDefault();	
		}
	});
	$("#btn").click(function(){
		alert("이벤트 감지");
	});
});
</script>
<input type="text" class="form-control input-sm" id="inp" name="inp">
<button type="button" class="btn btn-primary btn-sm" id="btn" name="btn">조회</button>
</body>
</html>

 

 

반응형
저작자표시 비영리 (새창열림)

'프로그래밍 > Script' 카테고리의 다른 글

[jQuery] jQuery .data()  (0) 2023.05.30
[javascript] 화면 리사이즈시 사이즈 확인 및 미디어쿼리 확인  (0) 2023.05.26
[VS Code] 인코딩 변경  (0) 2023.05.09
[ javascript ] CDATA 사용 이유  (0) 2023.05.08
9 Projects You Can Do to Become a Front-End Master in 2023  (0) 2022.11.02
반응형

[VS Code] 인코딩 변경

VS Code 사용하다보면 웹페이지 특성상  UTF-8 또는 EUC-KR 이 있는데, 

자동으로 되어 있어도 페이지와 맞지 않는 인코딩이 선택될때가 있다. 

 

F1 키를 입력하거나, 오른쪽 하단의 인코딩 정보를 클릭하면 아래 이미지처럼 Reopne with Encoding 이 나온다. 

그러면 그 중에 맞는 인코딩을 선택하면 된다. 

반응형
저작자표시 비영리 (새창열림)

'프로그래밍 > Script' 카테고리의 다른 글

[javascript] 화면 리사이즈시 사이즈 확인 및 미디어쿼리 확인  (0) 2023.05.26
[javascript] 엔터키 입력 이벤트, KeyboardEvent keyCode  (0) 2023.05.26
[ javascript ] CDATA 사용 이유  (0) 2023.05.08
9 Projects You Can Do to Become a Front-End Master in 2023  (0) 2022.11.02
[javascript] GoJS, A Web Framework for Rapidly Building Interactive Diagrams  (0) 2022.11.01
반응형

1) CDATA로 감싼 JAVASCRIPT부분이 의도치 않게 XML Parser 에 의해 잘못 인식되는 것을 막기 위함.
2) XHTML이 아닌 HTML로 인식되는 경우에도 JAVASCRIPT가 문제없이 동작하도록 하기 위함.
3) javascript안에서 태그를 사용할 경우 CDATA 선을 해줘서 오류처리를 막기 위함.

 * 사용예제
<script>
//<![CDATA[
 JAVASCRIPT
//]]>
</script>

 //<![CDATA[
    // // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('YOUR APP KEY');
    // // 카카오톡 링크 버튼을 생성합니다. 처음 한번만 호출하면 됩니다.
    Kakao.Link.createTalkLinkButton({
      container: '#kakao-link-btn',
      label: '카카오링크 샘플에 오신 것을 환영합니다.',
      image: {
        src: 'http://dn.api1.kage.kakao.co.kr/14/dn/btqaWmFftyx/tBbQPH764Maw2R6IBhXd6K/o.jpg',
        width: '300',
        height: '200'
      },
      webButton: {
        text: '카카오 디벨로퍼스',
        url: 'https://dev.kakao.com/docs/js' // 앱 설정의 웹 플랫폼에 등록한 도메인의 URL이어야 합니다.
      }
    });
  //]]>

 

가끔 JAVASCRIPT 소스를 보다보면 아래처럼 스크립트 태그 내부에 <!--  -->로 영역을
잡아놓은 소스를 볼수있습니다.
 
<script>
<!--
  스크립트 내용
-->
</script>

 

이와 같이 짜여진 이유는 자바스크립트가 만들어진 초창기에 웹브라우저가

자바스크립트로 인식하지 못하고 html로 인식하여 인터프리팅 하는 것을 방지하기 위해서였습니다.

html 주석으로 감싸 스크립트 부분을 주석으로 인식하게 하는 것이죠.

하지만 현재에는 거의 사용하지 않는 방식이며 대신 

 

<script>

//<![CDATA[

스크립트 내용

//]]>

</script>

 

위와 같은 방식으로 변하였습니다.

웹 브라우저가 자바스크립트를 충분히 인식할 만큼 발전 하였지만 아직도 구분을 해주는 이유는 무엇일까요?

그것은 자바 스크립트를 인식을 하기는 하지만 

브라우저가 해당 페이지를 XHTML이 아닌 HTML로 인식하게되면 작동하지 않기 때문입니다.

(구 버전의 브라우저에서는 Content-type을 정해주지 않으면 정말 HTML로 인식하는 브라우저(IE)가 있었습니다.)

 

또 다른 문제점은 XML Parser에 있는데 XML Parser는 < 를 새로운 엘리먼트로 인식하며

&는 문자 엔티티로 인식하기 때문에 파싱중 에러로 인식합니다.

그래서 자바스크립트 부분만 CDATA( Unparsed Character Data)로 감싸서 XML Parser로 부터 자유로워질 수 있게 됩니다.

반응형
저작자표시 비영리 (새창열림)

'프로그래밍 > Script' 카테고리의 다른 글

[javascript] 엔터키 입력 이벤트, KeyboardEvent keyCode  (0) 2023.05.26
[VS Code] 인코딩 변경  (0) 2023.05.09
9 Projects You Can Do to Become a Front-End Master in 2023  (0) 2022.11.02
[javascript] GoJS, A Web Framework for Rapidly Building Interactive Diagrams  (0) 2022.11.01
[jQuery] Checkbox 컨트롤 (체크, 체크여부, 전체체크 등)  (0) 2022.10.31

+ Recent posts

티스토리툴바