알쓸다잡 (알아두면 쓸데 있는 다양한 잡식): javascript

레이블이 javascript인 게시물을 표시합니다. 모든 게시물 표시

2024년 6월 27일 목요일

javascript - 기본 및 활용

// ready
$(document).ready(function () {
// 버튼 클릭 이벤트
$("#btnID").click(function () {
});
// layer 클릭 이벤트
$(".layer").find("a[class='close_layer_popup']").click(함수호출);
// keypress 이벤트
$("#textID").keypress(inputOnlyNumber);
$("input[id^=txtPhoneNum]:text, input[id^=txtCellNum]:text").keypress(inputOnlyNumber);
// focusout 이벤트
$("#textID").focusout(function(e) {
});
// attr 속성 값 가지고 오기
var data_abc = parseInt($("#textID").attr("data-abc"));
});
// load
$(window).load(function () {
});

// 숫자키만 입력 + 특수문자 일부 허용
function inputOnlyNumber() {
if (event.keyCode >= 44 && event.keyCode <= 57) {
return true;
} else {
return false;
}
}

// 간단한 ajax 사용 예문
$.ajax({
url: "url.asp",
type: "POST",
data: "IDX=" + idx + "&GUBUN=" + gubun,
contentType: "application/x-www-form-urlencoded; charset=euc-kr", // 한글 문제인 경우
async: false, // 동기화 처리
success: function (data) {
//alert(data == "SUCCESS" ? "성공" : "실패");
},
error: function (request, status, error) {
//alert("code:" + request.status + "\n" + "message:" + request.responseText + "\n" + "error:" + error);
}
});
// ajax (json)
$.ajax({
url: "/aaa/bbb.asp",
async: false,
type: "POST",
contentType: "application/json",
data: "{Num:'" + Num + "', vId:'" + vId + "', zipCode:'" + zipCode + "' , isfree:'" + 1 + "'}",
success: function (result) {
var aaa = result[0].AAA;
},
error: function() {
alert("장바구니 정보 수정에 실패하였습니다.");
}
});

// 체크박스 전체 선택 및 미선택
function CheckBox_All(obj, cbName) {
$("input:checkbox[name=" + cbName + "]").each(function () {
$(this).prop("checked", $(obj).is(":checked"));
});
}

// 체크되어 있는 체크박스 개수 확인
var checkLength = $("input:checkbox[name=" + cbName + "]:checked").length;
if (checkLength == 0) {
alert("일괄 수정할 선택한 상품이 없습니다.");
return false;
}

// 체크되어 있는 체크박스 찾아서 박복 처리
var checkRequestPrice = true;
var checkPrePrice = true;
$("input:checkbox[name=" + cbName + "]:checked").each(function () {
// table의 tr 중에 체크박스와 같은 tr을 찾아 tr 안에 있는 hidden 또는 text 값 구하기
var prePrice = $(this).closest('tr').find("input:hidden[name=prePrice]").val();
var requestPrice = ($(this).closest('tr').find("input:text[name=requestPrice]").val()).replace(",", "");
// 숫자 체크
if ($.isNumeric(requestPrice) == false || requestPrice == "0") {
checkRequestPrice = false;
}
// 문자를 숫자로 비교
if (parseInt(prePrice) == parseInt(requestPrice)) {
checkPrePrice = false;
}
// 해당 tr 삭제
$(this).closest("tr").remove();
});

// 부모창 > 부모창 > 자식창에서 부모창 호출 방법
// 자식창
parent.WindowCloseAndRefresh();
// 부모창
function WindowCloseAndRefresh() {
parent.opener.location.reload();
window.close();
}

// iframe으로 데이터 submit하여 처리하는 방법 (formAction form에 있는 객체 데이터)
<div style="display: none;">
<iframe name="ifrmAction" id="ifrmAction" height="0" width="0"></iframe>
</div>
formAction.action = "Exec.asp";
formAction.target = "ifrmAction";
formAction.submit();

// 객체 활성화 및 비활설화
$("#COUNT_EVERY").prop('disabled', true);
$("input").prop('disabled', false);

// table > tr > td 에 있는 html 값 가지고 오기
function ProdAdd() {
var items = $("input:checkbox[name=chkBoxName]:checked");
if (items.length == 0) {
alert("선택해 주세요.");
return false;
}
var a = "";
var b = "";
var c = "";
$(items).each(function () {
var tdObj = $(this).closest("tr").find('td');
a = $(this).val();
b = $(tdObj).eq(2).html();
c = $(tdObj).eq(3).html();
if (parent.IsFindProd(ProdNum) == false) {
parent.SeachProdSelectAdd(a, b, c);
}
});
}

// 반복 값 join 만들기
var arrays = $("input[name=chkboxName]:checkbox:checked").map(function () {
return "'" + $(this).attr("data-abc") + "'";
}).get();
var arrayJoin = "[" + arrays.join(",") + "]";

// 요소 추가
function SeachProdSelectAdd(a, b, c) {
var appendHtml = "<tr style='height: 22px;' onmouseover='this.style.backgroundColor=\"#E3FEEB\"' onmouseout='this.style.backgroundColor=\"#FFFFFF\"'><td style='text-align: center;'><input type='checkbox' name='chkBoxPRODADD' value='" + a + "' style='cursor: pointer;' /><input type='hidden' name='PROD_ADD' value='" + a + "'></td><td style='text-align: center;'>" + a + "</td><td>" + b + "</td><td>" + c + "</td></tr>"
//$("#tablePRODADD").append(appendHtml); // 자식(children) 뒤 요소에 추가
$("#tablePRODADD").prepend(appendHtml); // 자식(children) 앞 요소에 추가
}

// 텍스트 박스 엔터키 클리 시 submit 처리
<input type="text" name="s_word1" size="25" value="<%=strSWord1%>" onkeypress="FN_FormSubmit()">
function FN_FormSubmit() {
if (event.keyCode == 13) {
document.ListForm.submit();
}
}

// for 문
for (var i = 0; i < list.length; i++) {
}
// 공백제거
$.trim("문자")

2024년 2월 21일 수요일

javascript - SQL 예약어 제거

//특수문자, 특정문자열(sql예약어) 제거
function checkSearchedWord(obj){
obj.value = obj.value+" ";
//특수문자 제거
if(obj.value.length >0){
var expText = /[%=><]/ ;
if(expText.test(obj.value) == true){
obj.value = obj.value.split(expText).join("");
}
//체크 문자열
var sqlArray = new Array( //sql 예약어
"OR", "SELECT", "INSERT", "DELETE", "UPDATE", "CREATE", "DROP", "EXEC", "UNION", "FETCH", "DECLARE", "TRUNCATE"
);
var regex;
var regex_plus ;
for(var i=0; i<sqlArray.length; i++){
regex = new RegExp("\\s" + sqlArray[i] + "\\s","gi") ;
if (regex.test(obj.value)) {
obj.value =obj.value.replace(regex, "");
alert("\"" + sqlArray[i]+"\"와(과) 같은 특정문자로 검색할 수 없습니다.");
}
regex_plus = new RegExp( "\\+" + sqlArray[i] + "\\+","gi") ;
if (regex_plus.test(obj.value)) {
obj.value =obj.value.replace(regex_plus, "");
alert("\"" + sqlArray[i]+"\"와(과) 같은 특정문자로 검색할 수 없습니다.");
}
}
}
return obj.value = obj.value;
}

2024년 1월 3일 수요일

javascript - input 태그 event

<input/> 이벤트 발생 순서

focus => keyDown => keyPress => input => keyUp => blur => change

( * keyDown 사용 권장)

<input/> 관련 이벤트들

focus : 요소가 포커스가 되고 커서가 발생하여 입력이 가능해졌을 때 발생하는 이벤트입니다. 이후 진행되는 인풋 관련 이벤트들이 발생하고 감지될 수 있는 시작점이 됩니다.

blur : 요소의 포커스가 해제되었을 때 발생하는 이벤트입니다.

change : focus가 발생하기 전의 원래 입력값과 비교하여 변화가 일어났을 경우 blur 이벤트 이후에 발생하는 이벤트입니다.

input : value 속성의 값이 바뀔 때마다 발생하는 이벤트입니다. 일반적으로 keyPress 직후에 value 속성이 바뀌면서 input 이벤트가 발생합니다. input 이벤트 객체의 data 프로퍼티는 value 속성에 가장 최근 추가된 한 글자를 가지고 있습니다.(영어의 경우 알파벳 한 글자, 한국어의 경우 초성/중성/종성으로 이루어진 한 글자)

keyDown : 키가 눌렸을 때 발생합니다. input 이벤트 전에 발생됩니다.

keyPress : 키가 눌렸을 때 발생하며, keyDown 이벤트 이후에 발생합니다. 한글 입력이나 기능키 입력시에는 발생하지 않습니다. MDN에서 찾아보면 deprecated 되었다고 나오니, input 이벤트 전에 입력을 제어하고 싶다면 keyDown 이벤트를 사용하는게 바람직해 보입니다.

keyDown과 여러모로 비슷한 특성을 가지지만 특정 키에는 발생하지 않는 등의 예기치 않은 동작으로 혼란을 줄 수 있는 이벤트가 아닐까 생각합니다.

keyUp : input 이벤트 발생 후 value가 업데이트 된 이후에 키보드에서 손을 떼면 발생하는 이벤트입니다. 당연하게도 키를 꾹 눌러서 입력을 반복하거나 할때는 발생하지 않습니다.

출처 : https://maxkim-j.github.io/posts/keyboard-input/

javascript - Notice rolling

<a href="" class="hiddenOverflow" style="display:block;width:200px;height:27px" rel="nosublink">item.TITLE</a>

</dd>

</dl>

dl.notice {float:left;padding-top:9px;width:325px;height:23px}

dl.notice dt {float:left;padding-right:6px;font-weight:bold;color:#ff4948}

dl.notice dt a {color:#ff4948;vertical-align:top}

dl.notice dd {float:left;padding-right:7px;font-size:12px}

dl.notice dd a {color:#444;vertical-align:top}

javascript - getUrlParams (object params)

2023년 11월 29일 수요일

javascript - 전개 연산자 {...} [...] 문법 (비구조화 할당/구조분해 할당)

비구조화 할당 문법을 소개

정의

모질라 형님들의 문서에 의하면 '비구조화 할당(destructuring assignment) 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식(expression)'입니다.

간단하게 정리하면 배열 [], 혹은 객체 {} 안의 값을 편하게 꺼내 쓸 수 있는 문법입니다.

기본 문법(배열)

배열에서의 적용은 아래와 같습니다.

[a1, a2, ...rest_a] = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(a1); // 1
console.log(a2); // 2
console.log(rest_a); // [3, 4, 5, 6, 7, 8, 9]

좌항이 호출될 변수명 집합, 우항이 할당할 값 입니다.

좌항의 각 요소에는 같은 index를 가지는 배열값이 할당됩니다.

또한 전개 연산자( ... )를 사용하여 좌항에서 명시적으로 할당되지 않은 나머지 배열 값들을 사용할 수 있습니다.

그리고 var, let, const를 사용해 변수들의 유효 범위를 명시적으로 선언할 수 있습니다.

var [b1, b2, ...rest_b] = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let [c1, c2, ...rest_c] = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const [d1, d2, ...rest_d] = [1, 2, 3, 4, 5, 6, 7, 8, 9];

전개 연산자 이후에 변수를 입력하거나, 좌 우항이 다른 속성일 경우 에러가 발생합니다.

[a1, a2, ...rest_a, a3] = [1, 2, 3, 4, 5, 6, 7, 8, 9]; // error
[a1, a2, ...rest_a] = {a1 : 10, a2: 20}; // error

기본 문법(객체)

객체에서의 적용은 아래와 같습니다.

var { a1, a2, ...rest_a } = { a1 : 10, a2 : 20, a3 : 30, a4 : 40 };
console.log(a1); // 10
console.log(a2); // 20
console.log(rest_a); // { a3: 30, a4: 40 }

객체의 경우에는 우항의 key 값이 좌항의 변수명과 매칭됩니다.

배열과 마찬가지로 var, let, const가 적용 가능합니다.

원래의 key 값과 다른 이름의 변수를 사용하는 방법은 아래와 같습니다.

var { a1 : awesome_name, a2 : dumb , ...rest_a } = { a1 : 10, a2 : 20, a3 : 30, a4 : 40 };
console.log(awesome_name); // 10
console.log(dumb); // 20

나머지 값을 뜻하는 전개 연산자는 우항의 key에 영향을 받지 않기 때문에 ...rest_a : blah 와 같은 표현식은 무의미하며, 실제로 에러가 발생합니다.

또한 우항의 key값에 변수명으로 사용 불가능한 문자열이 있을경우 아래와 같은 방식으로 비구조화 할 수 있습니다.

var key = 'it is key';
var { 'an-apple':an_apple, [key]:it_is_key } = { 'an-apple' : 10, 'it is key' : 20};
console.log(an_apple); // 10
console.log(it_is_key); // 20

다만 이 경우에는 'an-apple'과 매칭할 변수명(an_apple)을 작성하지 않으면 에러가 발생하게 됩니다.

마지막으로 객체 비구조화에서 주의해야 할 점은 변수 선언에 대한 명시(var, let, const)가 없을 경우 괄호를 사용하여 묶어주어야 한다는 것 입니다.

({ a, b } = { a : 10, b : 20});
console.log(a); // 10
console.log(b); // 20
{ c, d } = { c : 30, d : 40}; // error

기본값 할당

비구조화의 범위를 벗어나는 값 할당을 시도하면 undefined를 반환하게 됩니다.

[a, b] = [10];
console.log(a); // 10
console.log(b); // undefined

var {c, d} = { c : 20};
console.log(c); // 20
console.log(d); // undefined

이런 경우를 방어하기 위해 호출될 변수명들에 기본값 할당을 할 수 있습니다.

[a=10, b=20] = [10];
console.log(a); // 10
console.log(b); // 20

var {c = 30, d : new_name = 40} = { };
console.log(c); // 30
console.log(new_name); // 40

위와 같은 방법으로 변수명들에 할당 연산자(=)를 사용하여 기본값 할당을 할 수 있습니다.

5, 7번 줄처럼 객체에서 새로운 변수명에 할당하는 방식에도 기본값 할당을 사용할 수 있습니다.

복사(copy)

전개 연산자를 사용하여 배열, 객체의 깊은 복사를 할 수 있습니다.

var arr = [1,2,3];
var copy1 = arr;
var [...copy2] = arr;
var copy3 = [...arr];

arr[0] = 'String';
console.log(arr); // [ 'String', 2, 3 ]
console.log(copy1); // [ 'String', 2, 3 ]
console.log(copy2); // [ 1, 2, 3 ]
console.log(copy3); // [ 1, 2, 3 ]

얕은 복사인 copy1은 arr을 참조하기 때문에 0번 요소가 변경되었지만 전개 연산자를 사용한 copy2, copy3는 깊은 복사가 된 것을 볼 수 있습니다.

객체 역시 전개 연산자로 깊은 복사를 사용할 수 있습니다.

무엇보다도 강력한 점은 복사와 함께 새로운 값을 할당할 수 있다는 점 입니다.

var prevState = {
  name: "yuddomack",
  birth: "1996-11-01",
  age: 22
};

var state = {
  ...prevState,
  age: 23
};

console.log(state); // { name: 'yuddomack', birth: '1996-11-01', age: 23 }

위와 같이 ...prevState를 사용하여 기존 객체를 복사함과 동시에 age키에 새로운 값(23)을 할당할 수 있습니다.

리액트의 props나 state처럼 이전 정보를 이용하는 경우 유용하게 사용할 수 있습니다.

함수에서의 사용

함수의 파라미터 부분에서도 비구조화 할당을 사용할 수 있습니다.

이러한 문법은 특히 API 응답 값을 처리하는데에 유용하게 사용됩니다.

function renderUser({name, age, addr}){
  console.log(name);
  console.log(age);
  console.log(addr);
}

const users = [
  {name: 'kim', age: 10, addr:'kor'},
  {name: 'joe', age: 20, addr:'usa'},
  {name: 'miko', age: 30, addr:'jp'}
];

users.map((user) => {
  renderUser(user);
});

마찬가지로 map함수의 파라미터에도 바로 사용할 수 있습니다.

const users = [
  {name: 'kim', age: 10, addr:'kor'},
  {name: 'joe', age: 20, addr:'usa'},
  {name: 'miko', age: 30, addr:'jp'}
];

users.map(({name, age, addr}) => {
  console.log(name);
  console.log(age);
  console.log(addr);
});

for of 문

뿐만 아니라 배열 내 객체들은 for of 문을 사용하여 비구조화 할 수 있습니다.

const users = [
  {name: 'kim', age: 10, addr:'kor'},
  {name: 'joe', age: 20, addr:'usa'},
  {name: 'miko', age: 30, addr:'jp'}
];

for(var {name : n, age : a} of users){
  console.log(n);
  console.log(a);
}

중첩된 객체 및 배열의 비구조화

중첩된 객체 및 배열 역시 비구조화 할 수 있습니다.

const kim = {
  name: 'kim',
  age: 10,
  addr: 'kor',
  friends: [
    {name: 'joe', age: 20, addr:'usa'},
    {name: 'miko', age: 30, addr:'jp'}
  ]
};

var { name: userName, friends: [ ,{ name: jpFriend }] } = kim;
console.log(userName); // kim
console.log(jpFriend); // miko

friends 배열의 호출 변수를 명시하는 대신, 배열을 한번 더 비구조화한 모습이 시선을 강탈합니다.

출처 : https://yuddomack.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%AC%B8%EB%B2%95-%EB%B9%84%EA%B5%AC%EC%A1%B0%ED%99%94-%ED%95%A0%EB%8B%B9

알쓸다잡 (알아두면 쓸데 있는 다양한 잡식)