Javascript - ynjch97/YNJCH_WIKI GitHub Wiki
โท ์ ๊ท์์ ์ด์ฉํ ์ ๋ ฅ ๋ฐฉ์ง
- [] ๋ก ๊ฐ์ธ๋๋ฐ [^] ์ฒ๋ผ ์ฌ์ฉํ๋ฉด ํด๋น ๋ฌธ์๋ฅผ ์ ์ธํ๋ค๋ ๋ป์ด ๋จ
- \ ๋ค์ ํน์ ๋ฌธ์ ์ ๋ ฅํ์ฌ ์ ๊ท์ ๋ฌธ์์ด์ ๋ง๋ ๋ค.
var inputTxt = /[\{\};|~!^\โผ<>\#$\'\"\\]/gi;
$("body").on("keyup", 'input:not([type="password"]):not(".noChk"), textarea:not(".noChk")', function(){
var txtVal = $(this).val();
if(inputTxt.test(txtVal)){ // ํน์๋ฌธ์๊ฐ ํฌํจ๋๋ฉด ""์ผ๋ก replace
$(this).val(txtVal.replace(inputTxt,""));
}
});
var numTxt = /[^0-9]+/;
$("body").on("keyup", 'input.number', function(){
var txtVal = $(this).val();
if(numTxt.test(txtVal)){ // ์ซ์๋ฅผ ์ ์ธํ ๋ชจ๋ ๋ฌธ์ replace
$(this).val(txtVal.replace(numExcept,""));
}
});
โท event.stopPropagation(), event.preventDefault()
- event.stopPropagation()
: ๋ถ๋ชจ ๊ฐ์ฒด์ onclick ์ด๋ฒคํธ์ ์์ ๊ฐ์ฒด์ onclick ์ด๋ฒคํธ๊ฐ ์์ ์
์์ ๊ฐ์ฒด ํด๋ฆญ ์ด๋ฒคํธ๋ง ์คํ๋๊ณ ๋ถ๋ชจ๋ก ์ ํ๋์ง ์๋๋ก ํจ
- event.preventDefault ()
: a ํ๊ทธ์ ๊ฒฝ์ฐ href ์ ์ด๋ฒคํธ์ onclick ์ด๋ฒคํธ๊ฐ ์์ ์
ํด๋ฆญ ์ด๋ฒคํธ๋ง ์คํ๋๊ณ ๊ทธ ์ธ์ ๊ฒ์ ์คํ๋์ง ์๋๋ก ํจ
โท Formdata ๋ฉ์๋
- append(key, value) : ๋ฐ์ดํฐ ํค์ ๊ฐ์ ์ถ๊ฐ
- delete(key) : ์ถ๊ฐ๋ ๋ฐ์ดํฐ ์ญ์
- has(key) : ํน์ ๊ฐ์ ๊ฐ์ง๊ณ ์๋์ง ํ์ธ
- entries() : ํ์ฌ ๊ฐ์ง๊ณ ์๋ ๋ฐ์ดํฐ์ ๊ฐ์ ๋ฐฐ์ด๋ก ๋ฐํ
- values() : ๊ฐ์ง๊ณ ์๋ ๊ฐ์ ๋ชจ๋ ๋ฐํ
- get(key) : ํค์ ๋งคํ๋ ๊ฐ ๋ฐํ
- set(key, value) : ๋ฐ์ดํฐ์ ๊ฐ์ ์ค์ , ์ค์ ๋ ๊ฐ์ ๋ณ๊ฒฝ
// infoForm ์ input ์ค testVal ํด๋์ค๋ฅผ ๊ฐ์ง ๊ฒ๋ง ์ฝค๋ง(,)๋ฅผ ',' ๋ก ๋ณํ
var formData = new FormData($('#infoForm')[0]);
var valStr = "";
var keyStr = "";
for(var keys of formData.keys()) {
keyStr = String(keys);
var valArray = formData.getAll(keyStr);
if (formData.has(keyStr)){ // formData ์ ์๋ ๊ฐ ์ค์
if ($("input[name='" + keyStr + "']").first().hasClass("testVal")) { // testVal ํด๋์ค๋ฅผ ๊ฐ์ง ๊ฒฝ์ฐ
$.each(valArray, function(i, v) {
valStr = v.replace(/,/g, ',')
valArray.splice(i, 1, valStr);
});
formData.set(keyStr, valArray);
}
}
}
โท Enter ํค๋ฅผ ์ด์ฉํ ๊ฒ์
- form ์์ text ํ์ input ๋ฐ์ค๊ฐ ํ๋๋ง ์กด์ฌํ ๊ฒฝ์ฐ (hidden์ ์ธ) input ๋ฐ์ค์์ Enter ๋ฅผ ์น๋ฉด ์๋์ผ๋ก form submit์ด ๋จ
- input ๋ฐ์ค์์ ์ํฐ ๋๋ ์ ๋ ๊ฒ์์ด ๋์ํ๊ฒ ํ๋ ค๋ฉด ๋ค์๊ณผ ๊ฐ์ด ์ค์
<input type="text" onkeypress="if( event.keyCode==13 ){searchList();}" />
- ๋ค์๊ณผ ๊ฐ์ด JQuery ๋ฅผ ์ด์ฉํ๋ ๋ฐฉ๋ฒ๋ ์์
$("#searchKeyword").keyup(function(e){if(e.keyCode == 13) searchList(); });
โท <form> ํ๊ทธ๋ก ๊ฒ์ ์คํ
- <form> ํ๊ทธ ๋ด์ hidden ์์ฑ์ผ๋ก ๋ฃ์ input ๊ฐ์ ๋๊ธธ ๋
<form id="frm" name="frm">
<input type="hidden" id="type" name="type" value="0"> (...์๋ต)
- ๋ค์๊ณผ ๊ฐ์ด ์คํฌ๋ฆฝํธ๋ฅผ ์์ฑํ์ฌ ์ฌํ์ฉ ๊ฐ๋ฅ
function goDetail(){
$("#frm").attr({action:'${pageContext.request.contextPath}/common/memberDetail.do', method:'post'});
$("#frm").submit();
}
โท onload ์ ready
- window.onload : ํ์ด์ง๊ฐ ๋ชจ๋ ๋ก๋๋ ์์ ์ ํ ํ์ด์ง ๋น ํ๋๋ง ์ ์ฉ๋จ
window.onload = function () {
}
- $(document).ready() : DOM์ด ๋ชจ๋ ๋ก๋๋ ์์ ์ ์ค๋ณต ์ฌ์ฉํด๋ ์์๋๋ก ๋ชจ๋ ์คํ
$(document).ready(function(){ // ์๋ตํ์ฌ $().ready(function(){ ๋๋ $(function(){ ๋ก ์ฌ์ฉ ๊ฐ๋ฅ
});
โท ์ต์ ๋ ์ฒด์ด๋(Optional Chaining)
- Optional chaining์ ?. operator์ ํจ๊ป ์ฌ์ฉํจ
- '?'๋ฅผ ๋ถ์ฌ ๊ทธ ์์ฑ์ด ์กด์ฌํ๋ ๊ฒฝ์ฐ์๋ง chaining์ ๊ณ์ํ๊ณ ์กด์ฌํ์ง ์์ผ๋ฉด undefined ๋ฆฌํด
- object์ prop๋ฟ๋ง ์๋๊ณ ๋ฐฐ์ด, ํจ์์๋ ์ ์ฉ ๊ฐ๋ฅ
- obj?.prop / obj?.[expr] / arr?.[index] / func?.(args)
const person = {
name: 'Alice',
job: {
companyName: 'abc',
title: 'developer'
}
};
console.log(person.job.companyName); // 'abc'
console.log(person.pet.name); // error
console.log(person.pet?.name); // undefined