물품을 구매한 경우 취소 를 클릭하여 중복 거래를 방지해야 합니다

opener.location.reload() 대신
window.opener.location.href = window.opener.location.href;  혹은
window.opener.location.href = window.opener.document.URL; 로 설정해준다.

 

 

 

 

Posted by 홍반장水 홍반장水

댓글을 달아 주세요

https://jsfiddle.net/

 

Create a new fiddle - JSFiddle

 

jsfiddle.net

웹의 프론트엔드 기술인 HTML, CSS, JavaScript를 웹에서 작성해서 바로 테스트 해볼 수 있고, 그 소스를 저장 공유할 수 있는 서비스이다.

 

https://jsfiddle.net/user/mill01/fiddles/

 

kim hongwan's Fiddles - JSFiddle - Code Playground

 

jsfiddle.net

Posted by 홍반장水 홍반장水

댓글을 달아 주세요

12 Extremely Useful Hacks for JavaScript

https://github.com/maketroli/js-hacks/blob/master/README.md

 

maketroli/js-hacks

12 Extremely Useful Hacks for JavaScript. Contribute to maketroli/js-hacks development by creating an account on GitHub.

github.com

1) Converting to boolean using !! operator

function Account(cash) {
    this.cash = cash;
    this.hasMoney = !!cash;
}

var account = new Account(100.50);
console.log(account.cash); // 100.50
console.log(account.hasMoney); // true

var emptyAccount = new Account(0);
console.log(emptyAccount.cash); // 0
console.log(emptyAccount.hasMoney); // false

2) Converting to number using + operator

function toNumber(strNumber) {
    return +strNumber;
}

console.log(toNumber("1234")); // 1234
console.log(toNumber("ACB")); // NaN
This magic will work with Date too and, in this case, it will return the timestamp number:

console.log(+new Date()) // 1461288164385

3) Short-circuits conditionals

if (conected) {
    login();
}

conected && login();

user && user.login();

4) Default values using || operator

function User(name, age) {
    this.name = name || "Oliver Queen";
    this.age = age || 27;
}

var user1 = new User();
console.log(user1.name); // Oliver Queen
console.log(user1.age); // 27

var user2 = new User("Barry Allen", 25);
console.log(user2.name); // Barry Allen
console.log(user2.age); // 25

5) Caching the array.length in the loop

/*
This tip is very simple and causes a huge impact on the performance when 
processing large arrays during a loop. Basically, 
almost everybody writes this synchronous for to iterate an array:
*/
for(var i = 0; i < array.length; i++) {
    console.log(array[i]);
}

/*
If you work with smaller arrays – it’s fine, but if you process large arrays, 
this code will recalculate the size of array in every iteration of this loop and 
this will cause a bit of delays. 
To avoid it, you can cache the array.length in a variable to use it instead of invoking 
the array.length every time during the loop:
*/
var length = array.length;
for(var i = 0; i < length; i++) {
    console.log(array[i]);
}

//-- To make it smaller, just write this code:
for(var i = 0, length = array.length; i < length; i++) {
    console.log(array[i]);
}

; }

6) Detecting properties in an object

This trick is very useful when you need to check if some attribute exists and it avoids running undefined functions or attributes. If you are planning to write cross-browser code, probably you will use this technique too. For example, let’s imagine that you need to write code that is compatible with the old Internet Explorer 6 and you want to use the document.querySelector(), to get some elements by their ids. However, in this browser this function doesn’t exist, so to check the existence of this function you can use the in operator, see this example:

if ('querySelector' in document) {
    document.querySelector("#id");
} else {
    document.getElementById("id");
}

7) Getting the last item in the array

The Array.prototype.slice(begin, end) has the power to cut arrays when you set the begin and end arguments. But if you don’t set the end argument, this function will automatically set the max value for the array. I think that few people know that this function can accept negative values, and if you set a negative number as begin argument you will get the last elements from the array:

var array = [1,2,3,4,5,6];
console.log(array.slice(-1)); // [6]
console.log(array.slice(-2)); // [5,6]
console.log(array.slice(-3)); // [4,5,6]

8) Array truncation

var array = [1,2,3,4,5,6];
console.log(array.length); // 6
array.length = 3;
console.log(array.length); // 3
console.log(array); // [1,2,3]

9) Replace all

The String.replace() function allows using String and Regex to replace strings, natively this function only replaces the first occurrence. But you can simulate a replaceAll() function by using the /g at the end of a ​Regex:

var string = "john john";
console.log(string.replace(/hn/, "ana")); // "joana john"
console.log(string.replace(/hn/g, "ana")); // "joana joana"

10) Merging arrays

var array1 = [1,2,3];
var array2 = [4,5,6];
console.log(array1.concat(array2)); // [1,2,3,4,5,6];

/*
However, this function is not the most suitable to merge large arrays 
because it will consume a lot of memory by creating a new array. 
In this case, you can use Array.push.apply(arr1, arr2) which 
instead creates a new array – it will merge the second array in 
the first one reducing the memory usage:
*/
var array1 = [1,2,3];
var array2 = [4,5,6];
console.log(array1.push.apply(array1, array2)); // [1,2,3,4,5,6];

11) Converting NodeList to Arrays

If you run the document.querySelectorAll("p") function, it will probably return an array of DOM elements, the NodeList object. But this object doesn’t have all array’s functions, like: sort(), reduce(), map(), filter(). In order to enable these and many other native array’s functions you need to convert NodeList into Arrays. To run this technique just use this function: [].slice.call(elements):

var elements = document.querySelectorAll("p"); // NodeList
var arrayElements = [].slice.call(elements); // Now the NodeList is an array
var arrayElements = Array.from(elements); // This is another way of converting NodeList to Array

12) Shuffling array’s elements

var list = [1,2,3];
console.log(list.sort(function() { Math.random() - 0.5 })); // [2,1,3]

 

​#javascript

#!! #operator #+ #number

#Short-circuit

#array.length #loop

#detecting #properties #object

#item #array

#array_truncation

#replaceAll #replace

#merging #array #merging_array

#NodeList to #Array

#Shuffling #elements

Posted by 홍반장水 홍반장水

댓글을 달아 주세요

Internet Explorer 에서의 ajax 에서의 한글 깨짐 현상

IE에서만 encodeURI를 적용하는게 맞다.

// 윈도우인지 다른 브라우저인지 확인 
            var ua = window.navigator.userAgent;
            var postData;
            // 윈도우라면 ? 
            if (ua.indexOf('MSIE') > 0 || ua.indexOf('Trident') > 0) {
                postData = encodeURI(sendData);
            } else {
                postData = sendData;
            }

            $.ajax({
                url: "thumnailUpload.php", // Url to which the request is send
                type: "POST",             // Type of request to be send, called as method
                data: postData, // Data sent to server, a set of key/value pairs (i.e. form fields and values)
                contentType: false,       // The content type used when sending data to the server.
                cache: false,     

 

Posted by 홍반장水 홍반장水

댓글을 달아 주세요

JSON Editor Online 

https://jsoneditoronline.org/

 

JSON Editor Online - view, edit and format JSON online

 

jsoneditoronline.org

메뉴얼 : https://jsoneditoronline.org/doc/index.html

 

JSON Editor Online - Documentation

JSON Editor Online - Documentation Introduction JSON Editor Online is a web-based tool to view, edit, and format JSON. It shows your data side by side in a clear, editable treeview and in a code editor. Supported browsers: Chrome, Firefox, Safari, Edge, In

jsoneditoronline.org

Shortcut : https://github.com/ajaxorg/ace/wiki/Default-Keyboard-Shortcuts

 

ajaxorg/ace

Ace (Ajax.org Cloud9 Editor). Contribute to ajaxorg/ace development by creating an account on GitHub.

github.com

Posted by 홍반장水 홍반장水

댓글을 달아 주세요

 AJAX Cross Origin plugin


로컬 프록시를 작성할 필요없이 Cross Origin AJAX 요청을 허용하는 jQuery 플러그인입니다.   

http://www.ajax-cross-origin.com/

 

Ajax Cross Origin - jQuery plugin

Source code In order maintain this site and keep it running, we ask for symbolic donation before you download the sources. You can donate as much as you want, even $1 is enough. The package contains the source code files include instructions and a test pag

www.ajax-cross-origin.com

<html>
<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script type="text/javascript" src="js/jquery.ajax-cross-origin.min.js"></script>
</head>

<body>

<select id="service">
  <option value="http://ip.jsontest.com/">IP Address</option>
  <option value="http://headers.jsontest.com/">HTTP Headers</option>
  <option value="http://date.jsontest.com/">Date & Time</option>
  <option value="http://echo.jsontest.com/key/value/one/two">Echo JSON</option>
  <option value='http://validate.jsontest.com/?json={"key":"value"};'>Validate</option>
  <option value="http://code.jsontest.com/">Arbitrary JS Code</option>
  <option value="http://cookie.jsontest.com/">Cookie</option>
  <option value="http://md5.jsontest.com/?text=[text%20to%20MD5]">MD5</option>
</select><br/>
<input type="text" id="url" style="width: 400px">
<input type="button" id="btn" value="Get JSON">
<br/><br/>
<div id="test" />

<script type="text/javascript">
$(function() {
  $( '#service' ).on( 'change', function(){
    $( '#url' ).val( $( this ).val() );
  });
  
  $( '#url' ).val( $( '#service' ).val() );
  
  $( '#btn' ).click(function(){
    var url = $( '#url' ).val()
    
    $.ajax({
      crossOrigin: true,
      url: url,
      success: function(data) {
        $( '#test' ).html(data);
      }
    });
  });
}); 
</script>

</body>
</html>
Posted by 홍반장水 홍반장水

댓글을 달아 주세요

javascript, nl2br, nl to  


function nl2br(str){  
    return str.replace(/\n/g, "<br />");  
}   

function nl2nbsp(str){   
    return str.replace(/\n/g, "");  
}   

'프로그래밍 > jQuery & Javascript' 카테고리의 다른 글

JSON Editor Online  (0) 2019.11.26
[jQuery] AJAX Cross Origin plugin  (0) 2019.10.21
javascript, nl2br, nl to &nbsp;  (0) 2019.09.11
[jQuery] touch event 체크  (0) 2019.08.19
jQuery 화면전환 효과 참고 사이트  (0) 2019.08.02
[javascript] Switch case else  (0) 2019.07.31
Posted by 홍반장水 홍반장水

댓글을 달아 주세요

#jQuery #touch #event #document #bind() #touchmove #touchstart #touchend

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>mobile.html</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
<script src="/js/comm/jquery-1.11.1.js"></script>
<script>

	$(document).ready(function() {

		$(document).bind('touchstart', function(e) {
			$("#msg").html("터치가 시작되었어요.");
			e.preventDefault();	//	이벤트취소
		});

		$(document).bind('touchmove', function(e) {
			//	jQuery 이벤트 객체를 자바스크립트 표준 이벤트 객체로 바꾸기
			//	이유는 jQuery 에서 자바 스크립트
			var event = e.originalEvent;
			$('#msg').html('touch 이벤트 중입니다.'); 
			//	div에 터치한 좌표값 넣기
			$('#msg').append('<div>' + event.touches[0].screenX + ',' +
					event.touches[0].screenY + '</div>');
			event.preventDefault();
		});

		$(document).bind('touchend', function(e) {
			$("#msg").append("<div>터치이벤트가 종료되었어요</div>"); 
		});
	});

</script>
</head>
<body>
<h2>모바일용 홈페이지 입니다.</h2>
<!-- 
		스마트폰의 브라우저 : 마우스 이벤트와는 별도로 터치 이벤트를 지원함 
		touchstart : 터치가 시작될때
		touchend : 터치가 종료될때 
		touchmove : 터치한 상태로 이동할때 
		touchenter : 터치한 요소의 경계외부에서 내부로 이동할때 
		touchleave : 터치한 요소의 경계내부에서 외부로 이동할때 
 -->
<div id="msg"></div>
</body>
</html>
Posted by 홍반장水 홍반장水

댓글을 달아 주세요

jQuery 화면전환 효과 참고 사이트

https://tympanus.net/Development/PageLoadingEffects/index6.html

 

Page Loading Effects | Demo 6

To start the page loading animation, click the following link: Show Page Loader If you enjoyed this demo you might also like: Fullscreen Overlay Effects Shape Hover Effect

tympanus.net

https://tympanus.net/Development/PageTransitions/

 

A Collection of Page Transitions

A collection ofPage Transitions A collection ofPage Transitions A collection ofPage Transitions A collection ofPage Transitions A collection ofPage Transitions A collection ofPage Transitions

tympanus.net

https://github.com/codrops/PageTransitions

 

codrops/PageTransitions

A showcase collection of various page transition effects using CSS animations. - codrops/PageTransitions

github.com

 

Posted by 홍반장水 홍반장水

댓글을 달아 주세요

switch (new Date().getDay()) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
     day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case 6:
    day = "Saturday";
}

[javascript] Switch case else

switch(expression) {
  case x:
    // code block
    break;
  case y:
    // code block
    break;
  default:
    // code block
}

 

 

Posted by 홍반장水 홍반장水

댓글을 달아 주세요