CodeHoon

안녕하세요 상훈입니다!

구글 애드센스가 끊긴지도.... 어언 2주가 되어가네요! 하하 빌어먹게도 멋진 녀석 같으니라고^^7

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

자바스크립트로 데이터를 받아왔는데, 숫자만 출력하고 싶습니다. 어떻게 해야할까요?

let str = "안녕하세요1239입니다.";

str = replaceAll(/[^0-9]/g, "");

로 간단하게 처리가 가능합니다.

사용 방법은 아래와 같습니다.

str.replaceAll(없애고싶은내용, 바꿀내용);

사용 예시를 작성해보겠습니다!

숫자의 데이터가 필요한 상황인데, 애석하게도 숫자만 온게 아니라 문자가 포함된 문자열로 출력되었다는 가정입니다.

function changeLetter (str, successCallback) {
	str = str.replaceAll(/[^0-9]/g, "");
    successCallback(str); //str을 반환
}

changeLetter("안녕하세요12395", function (ret) { //성공 콜백함수와 데이터
	
    //ret이 변경된 새로운 str이 되는것이죠.
    $("#여기에작성해주세요").text(ret); //12395
    
});

결과적으로, id: 여기에작성해주세요 라는 아이디를 가진 태그의 텍스트에 숫자만 출력되는 내용이 될겁니다.

이렇게 함수로 쓰면 언제든지 함수만 호출해서 꺼내올 수 있게 작성할 수 있습니다!

다만 이것의 문제는 문자열이라는 것에 있죠.

조금 더 나아가서 저 문자열을 1)숫자로 변경하고, 2) 뒤에 원을 붙여서 출력하도록 하겠습니다.

function changeLetter (str, successCallback) {
	str = str.replaceAll(/[^0-9]/g, "");
    successCallback(str);
}

changeLetter("안녕하세요12395", function (ret) { //성공 콜백함수와 데이터
	
    //ret이 변경된 새로운 str이 되는것이죠.
    ret = parseInt(ret);
	console.log(ret + "원");
});

이렇게  parseInt 혹은 Number... 등을 이용해서 숫자로 변경하고,

출력할 때 "원" 문자까지 합쳐서 출력하는 방식을 알아보았습니다. 

감사합니다.

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

안녕하세요 상훈입니다. 

jQuery - Handlebars.js 를 사용하는데, 다 제대로 한 것 같은데, 아래와 같은 에러를 내뱉습니다.

요놈의 핸들바는 불친절하게 에러를 좀 내뱉는 것 같습니다.

Handlebars Pass a string or Handlebars AST to Handlebars compile ...

undefined 오류도 포함합니다.

확인사항

1. 실제 값이 undefinded 인지.
2. 컴파일 하려는 id의 값과 html-script-handlebar 의 id 를 일치시켰는지 여부
3. 해당 script를 포함하고 싶은 태그가 렌더링 되고 난 이후에 작성이 되었는지 여부

저는 3번에 해당하는 것이었습니다.

<div id="handlebarExample">
	<script id="handlebarExampleTarget" handlebar...></script>
</div>

이렇게 작성을 했었는데, 인식이 안되더라구요.

그래서 해당 <div>의 속을 비워주고, script를 아래로 내려주었더니 해결되었습니다.

<div id="handlebarExample"></div>
...
<script id="handlebarExampleTarget" handlebar...></script>

아무래도 완전히 컴파일이 되기 전에 script가 동작하게 되어 일어난 현상이 아닐까 싶습니다. 

2시간동안 헤매었는데, 논리상 오류가 없다보니 위치를 고려하지 못했었습니다.

이상입니다.

안녕하세요 상훈입니다.

jQuery - Swiper 를 사용하는데, activeIndex가 뭐지?  slideChange는 어떻게 사용하는것이지? 라는 의문이 들어 찾아보고 메모합니다.

일단 기본적으로 적용시킨것들은 이미 하셨다고 생각하고 넘어가도록 하겠습니다.

1. activeIndex 

var swiperExample = new Swiper(".swiper-container", {
	
    ...
     
});

이런 swiper가 있을 때, activeIndex는 간단하게 얻을 수 있습니다.

const swiperIndex = swiperExample.activeIndex

이렇게하면 현재 활성화되어있는 swiper의 번호를 얻을 수 있습니다.

2.slideChange

슬라이드가 변할 때 특정 동작을 실행합니다.

var swiperIndex;

var swiperExample = new Swiper(".swiper-container", {
	
    ...
     
    on: {
    	slideChnage: function () {
        	alert(this.realIndex);
        }
    }
});

slideChange 가 동작할 때마다 alert이 출력될 것 입니다.

이상입니다.

안녕하세요 상훈입니다. 

제이쿼리의 $.extend를 처음 보게 된다면 당황하셨을 수도 있습니다. 하지만 간단한 내용이라는 것을 알아주시기 바랍니다.

객체 A, B가 있다면,
$.extend(A, B) 는 A뒤에 B를 합치는 활동이라고 볼 수 있습니다.

여러개의 객체를 extend 내부에 넣을 수 있습니다.

const A = {age: 12, weight: 52} 
const B = {name: '상훈', height: 200}

const C = $.extend(A,B) // {age: 12, weight: 52, name: '상훈', height: 200}

만약 중복되는 key값을 가지고 있다면, "뒤"에서 덮어씌워집니다.

const A = {age: 12, weight: 52} 
const B = {name: '상훈', height: 200, age: 30}

const C = $.extend(A,B) // {age: 30, weight: 52, name: '상훈', height: 200}

이렇게 age가 뒤에 넣은 객체 B의 값으로 변한 것을 확인할 수 있습니다.

이상입니다.

안녕하세요 상훈입니다. 

제이쿼리를 이용하여 (1) radio 버튼이 체크되어있는지 여부, (2) 체크 되어있는 값을 가져오기의 예제를 작성해보도록하겠습니다.

html

<input type="radio" name="item" value="1">
<input type="radio" name="item" value="2">
<input type="radio" name="item" value="3">
<input type="radio" name="item" value="4">

이렇게 4개의 이름이 같은 radio 버튼이 존재하고, 모두 값이 다를 때,

1. 버튼이 체크 되어있는지 여부 확인하기

const itemChecked = $('input[name=item]').is('checked');

item 이라는 name 속성을 가진 radio 태그 중 체크 되어있는 것의 노드를 가져옵니다.

 2. 체크 되어있는 값을 가져오기

위를 좀 더 단축하여 사용하겠습니다.

const itemValue = $('input[name=item]:checked').val();

이렇게 item이라는 name 속성을 가진 녀석 중 체크 되어있는 노드의 값을 가져옵니다.

이상입니다.

안녕하세요 상훈입니다. 

요즘 jquery를 무척 많이 접하게 되어 저도 하나씩 모르는 것들을 알아가고 있습니다.

예를 들어... show(), hide()..? ㅋㅋㅋㅋ

제이쿼리를 이용하여 특정 버튼을 활성화 / 비활성화 하는 방법에 대해 포스팅하겠습니다.

<button type="button" id="myButton" onclick="change()" disabled>  click  </button>

위와 같이 id : myButton,  onclick: change() 라는 메서드를 실행하고 비활성화 된 click 버튼이 있습니다.

그럴 때에 제이쿼리로 해당 버튼의 활성화 비활성화 상태를 변경하고 싶은데요,

attr() 을 사용하는 방법, 그리고 prop()을 사용하는 방법이 있습니다.

1. attr()

// 1. 온오프가 아니라 비활성만 제거하는 방법
function change() {
	$('#myButton').removeAttr('disabled');
}

// 2. 변수를 하나 할당하여 온오프로 관리하기
let status = true
function change() {
	if( status ) {
    	$('#myButton').removeAttr('disabled');
    } else {
    	$('#myButton').attr('disabled');
    }
}

이렇게 하는 방법이 있구요~

2. prop()

// 1. 온오프가 아니라 비활성만 제거하는 방법
function change() {
	$('#myButton').prop('disabled', false); // 비활성을 비활성 = -1 x -1 와 같음
}

// 2. 변수를 하나 할당하여 온오프로 관리하기
let status = true
function change() {
	if( status ) {
    	$('#myButton').prop('disabled', false);
    } else {
    	$('#myButton').prop('disabled', true);
    }
}

이렇게 사용하시면 됩니다. 

Prop() 을 사용하시는 것을 권장드립니다.

이상입니다. 

부트스트랩 cdn을 사용하던 와중 해당 에러가 지속적으로 발생하였다.

이 문제는 아주 단순한 내용이다.

스크립트의 순서 때문.

이런식으로 boostrap과 jquery cdn을 삽입하였는데, 순서를 바꿔주자

그렇다면 새로고침을 해주어 콘솔창을 확인하면 에러가 사라졌음을 알 수 있다.

jQuery가 먼저오고, bootstrap이 그 다음에 와야 해당 에러가 발생하지 않는다.

이상입니다.

안녕하세요 상훈입니다.

이 글을 PHP에 올려야할지 javascript에 올려야할지 고민을 1초 정도 했고 자바스크립트 기반이기 때문에 자바스크립트에 게시하게 되었습니다.

해당 과정은  [  select-box의 한 항목을 선택하면, 그 아래의 select-box가 활성화되면서 해당되는 리스트를 출력  ]  합니다.

Ajax로 php에 호출을 하면, php의 데이터베이스에서 데이터를 출력하여 배열에 담고,
담은 배열을 json endcode하여 출력하는 값을 json 형식으로 받아, 파싱하여 출력하는 것입니다.

1. javascript(ajax) (제이쿼리 필요합니다! [ cdn 링크 ] )
2. php

HTML

<select id="name" onchange="selectItem()" name="name">
   <option value="" selected>아이템 리스트들</option>
   <option value="item01" >아이템 리스트1</option>
   <option value="item02" >아이템 리스트2</option>
   <option value="item03" >아이템 리스트3</option>
</select>
<select id="item_name">
   <option value="">선택해주세요</option>
</select>

이러한 html 요소들이 존재합니다.

onchange() 기능을 이용해 js에서 감지할 수 있도록 함수로 선언해주었습니다.

리스트 요소 중 하나를 선택하면 해당되는 2번째 select-box에 값을 출력해줍니다. [ 데이터베이스 이용 ]

JAVASCRIPT  -  아래에서 상세히 설명

<script>
  function selectItem(value){
      any_name = document.querySelector('#name').value
      
      $.ajax({
        url: "getItemList.php",
        method: "POST",
        data: { any_name: any_name }
      })
      .done(
      	(result) => {
      		if(result === ''){
      			const item_name = document.querySelector('#item_name')
      			while(item_name.hasChildNodes() ){
      				item_name.removeChild(item_name.firstChild)
      			}
      			$('#item_name').append('<option value="">' + '선택해주세요 ' + '</option>');	
      		}else{
      			const item_name = jQuery.parseJSON(result)
      			i = 0
      			$.each(item_name, function(){
      				$('#item_name').append('<option value="' + item_name[i] + '">' + item_name[i] + '</option>');
      				i++
      			});
      		}
      	}
      )
      .fail( () => { alert('다시 시도해주세요.') })
  }
</script>

ajax 기본 틀

PHP [getItemList.php]

<?php
// 
if($any_name = $_POST['any_name'] ){
    
    //database 연동
    include '../db.php'; 
    
    //sql 작성
    $sql = "select item_name from 테이블 where 컬럼명 = '$any_name' ";
    $result = mysqli_query($conn, $sql);
    
	// 빈 배열 $array[]에 $row['item_name'] 넣어주기
    while($row = mysqli_fetch_assoc($result)){
        $array[] = $row['item_name'];
    }

	// json 객체로 변환하여 echo
    echo json_encode($array, JSON_UNESCAPED_UNICODE);

    
}else{
    echo ""; // 만약 선택하지 않았을 때 반환하는 값 : null
}

처음부터 보자면, 

1. name 이라는 id 를 가진 요소의 값을 가져온다. ( 첫번째 select-box에서 선택한 요소 )

2. ajax를 이용하여 데이터를 송신한다. 

  [ 목적지 : url, 
    방식 : method(get, post) , 
    송신할 요소 (parameter) : data  ] 

3. php 에서 데이터를 출력하고 json 객체로 출력해주기
   -> 주석으로 충분히 설명을 했다고 생각합니다.

4. javascript 에서 .done 부분

if영역(return null) 과 else영역(return json)은 각기 다른 결과를 나타냅니다. 

else영역(return json)부터 보자면, 
1. item_name이라는 상수에 JSON을 파싱한 결과값(result)을 담습니다.
2. jQuery의 each함수를 사용하여, item_name을 반복해줍니다.
3. 각각 가지고 있는 item_name의 개수에 따라 결과에 추가될 리스트의 개수가 달라집니다.

if영역(return null) 에서는 추가했던 option을 제거해주는 역할을 합니다.
 (혹은 이 내용을 기본값으로 하는 것도 좋을것같군요. 기본적으로 속을 비워주고, option을 채워주는 방식으로요.)

평소 ajax를 잘 사용하지 않아 해당 내용을 작성하는데에 조금 헤맸습니다.

이번 기회로인해 공부 잘하고 갑니다. ㅎㅎ

참고

이상입니다.