본문 바로가기
프로그래밍/웹

자바스크립트(javascript) 문법 모음

▲안전제일▲ 2019. 6. 18. 16:35
반응형

   기본 문법

 

   2차원 배열 생성 

var array = new Array(); 

// 떨거지 배열 소환 
var array_sub = new Array(); 

array_sub.push("level"); // 1차원 
array_sub.push("5");     //  2차원 
array.push(array_sub); // 합체

   열거형 상수(enumeration)

var myEnum = { 
One: 1, 
Two: 2, 
Three:3 
};

// 사용
if ( this.value === myEnum.One || this.value === myEnum.Two ) { };

   예외 처리(exception handling)

try {
 // 실행할 코드
}
catch(error) {
 // 에러시 코드
}
finally {
 // 에러와 관계없이 반드시 실행되는 코드
}

   오브젝트 조회

for (var key in obj) {
console.log("Attributes : " + key + ", value : " + obj[key]);
}

 

 

 

 

   문자열 관련 함수 

   문자 찾기 

indexOf ( 찾고싶은 문자 , 시작위치 ) 
시작위치 삽입은 선택사항이고 기본값 0임. 

 

   배열 합치기-join

 

# split 후 출력 결과에 ,(콤마) 제거

data.join("")

 

var str = "Go Start a Fire" 

str.indexOf("a");    // 결과 : 5 
str.indexOf("a",6); // 결과 : 9

 

 

  모든 문자열 치환 - replaceAll

function replaceAll(str, searchStr, replaceStr) {
  return str.split(searchStr).join(replaceStr);
}

var str = "abcd"
var str2 = replaceAll(str,"abc","xxx");

 

  소수점 표현 &  거듭 제곱 & 문자열을 정수 및 소수로 변환하기

// 소수점 표현
var n = 123.456;
Math.ceil(n); // 올림 - 124  
Math.floor(n); // 버림 - 123
Math.round(n); // 반올림 - 123

// to Fixed = 숫자를 문자로 변환 - 지정된 소수점 자리를 반올림한다.
n.toFixed(0); // 123 
n.toFixed(2); // 123.46

// 거듭 제곱 
Math.pow(2, 3);  // 8 = 2^3
// 문자를 정수로 변환. parseInt("2") - 2
// 문자를 소수로 변환. parseFloat("3.5") - 3.5

 

 

   여기가면 왠만한 것 다 나옵니다.. --> https://jsfiddle.net/loomio3030/9Lv1ocmt/

 


   배열 조작 

   맨 끝에 배열 삽입 - push

   맨 끝에 배열 제거 - pop
   맨 앞 배열 제거 - shift
   맨 앞 배열 추가 - unshift 

제거 되는 함수는 파라미터 없고 , 제거된 데이터를 반환함. 
추가하는 함수는 추가할 문자열 넣으면 되고 , 길이를 반환함..  

 

str.push("add")

 

   배열 복제 - slice 

   배열 추가 및 제거(범위 지정) - splice 

 

splice(위치 , 삭제할 개수 , 추가할 개수) 

 

// 제거 
var alphabat = ["a","b","c","d","e"]; 
alphabat.splice(2,2) // 리턴값 - c,d , alphabat = ["a","b","e"] 

// 추가 
var alphabat = ["a","b","e"]; 
alphabat.splice(2, 0, "c", "d"); // alphabat = ["a","b","c","d","e"]



   클립보드 복사

버튼 클릭했을 때 텍스트가 복사되게 해보자.

 

 

function copyToClip(text) {
var textNode = document.createTextNode(text);
document.body.appendChild(textNode);

var range = document.createRange();
var selection = window.getSelection;

range.selectNodeContents(textNode);
selection().removeAllRanges();
selection().addRange(range);

document.execCommand("copy");

selection().removeAllRanges(range);
document.body.removeChild(textNode);
}

copyToClip('copytext_abc');

 

 

   키보드 입력 감지

function ckENT(event){ 
  var x = event.keyCode; 
  if (x==13) 
    alert("Enter key press!");
 }

 

 

<input type="button" value="버튼" onkeydown="ckENT(event)">

 

 

 

   정렬 ( 수 , 문자 )

 

   알파벳 순 정렬 

 

   오름차순 

 

contents.sort();


   내림차순

 

contents.sort(); 
contents.reverse();

   숫자 순 정렬  

 

   오름차순

 

contents.sort(function(a, b){return a - b});


   내림차순 

 

contents.sort(function(a, b){return b - a});

 

   배열 섞기

 

function shuffle(a) { 
    var j, x, i; 
    for (i = a.length; i; i -= 1) { 
        j = Math.floor(Math.random() * i); 
        x = a[i - 1]; 
        a[i - 1] = a[j]; 
        a[j] = x; 
    } 
} 


var myArray = ['1','2','3','4','5','6','7','8','9']; 
shuffle(myArray);

 

   Null 체크

var isEmpty = function(value){
if( value == "" || value == null || value == undefined || ( value != null && typeof value == "object" && !Object.keys(value).length ) ){ return true }
else{ return false } };

 

   배열 랜덤 요소 얻기

var array = ["a","b","c"];
var random = array[Math.floor(Math.random() * array.length)];

배열 전체에서 랜덤하게 아이템을 하나 가져온다.

 

   현재 웹 페이지 URL 얻기

window.location.toString()

 

   날짜 2 digit(두자릿수)로 만들기

EX) 2019-7 → 2019-07

var date = new Date(); 
alert( ("0" + (date.getMonth()+1) ).slice(-2) );

 

 

   정규식

 

   HTML 태그 제거

text = text.replace(/<br\/>/ig, "\n");
text = text.replace(/&nbsp;/ig, " ");
text = text.replace(/<(\/)?([a-zA-Z]*)(\s[a-zA-Z]*=[^>]*)?(\s)*(\/)?>/ig, "");
return text;

  개행 문자를 br 태그로 변환

text = text.replace(/<br\/>/ig, "\n");
text = text.replace(/&nbsp;/ig, " ");
text = text.replace(/<(\/)?([a-zA-Z]*)(\s[a-zA-Z]*=[^>]*)?(\s)*(\/)?>/ig, "");
return text;

  정규식 변수 사용

var var_test = "abcd";
var re = new RegExp(`${var_test}`,"gi");
var res = 'abcdefg'.replace(re , "");

 

  텍스트 사잇값 추출

let pat = /(●+)(.*?)(?=\1)/;
let s = '●● test ●● ';
let result = pat.exec(s)[2]
// ●가 여러개면
s.split('●●').map((x) => x.trim()).filter((x) => x)

 

  값 증가

'url1'.replace(/\d+$/, function(n){ return ++n }); // "url2"

 

 

   의미있는 단어의 맨 앞글자를 대문자로 변경하기

var result = data.replace(/(?:^|\s)\w/g, function(match) {
     return match.toUpperCase();}));

   언이스케이핑(Unescaping)

data.replace(/\\n/g,"\n")

 

   모든 공백 제거

data.replace(/(\s*)/g,"")

 

   인코딩

 

   Base64

var str = "ABCD";

str = btoa(str); // Base64로 인코딩 - QUJDRA== 
str = atob(str); // Base64를 텍스트로 변환 - ABCD

base64 인코딩 할 때 특정 기호를 인식하지 못하는 경우가 있다. 

var str = "abc ☜" ; 
btoa(str); 
위 코드를 실행하면 에러메시지가 발생한다. 
" Window'에서 'btoa'를 실행하지 못했습니다. 인코딩 할 문자열에 Latin1 범위 밖의 문자가 포함되어 있습니다. " 

위 에러는 unescape 구문을 추가시켜주면 해결된다. 

window.btoa(unescape(encodeURIComponent(str))); // 인코딩 
decodeURIComponent(escape(window.atob(str.replace(/\s/g, '')))); // 디코딩

   URL

var str = "http://www.naver.com/query?안 녕" 

encodeURI(str); // 인터넷 주소에서 사용하는 :, ;, /, =, ?, & 등을 제외하고 인코딩하는 함수 
// "http://www.naver.com/query?%EC%95%88%20%EB%85%95" 

encodeURIComponent(str); // 모든 문자를 인코딩하는 함수입니다. - 특수문자도 포함될 경우 사용 
// . 보통 파라미터를 전달하는 인터넷주소(URL) 전체를 인코딩 할 때 사용
// "http%3A%2F%2Fwww.naver.com%2Fquery%3F%EC%95%88%20%EB%85%95" 


decodeURI(str); // encodeURI()로 인코딩한 문자열을 디코딩하는 함수 
decodeURIComponent(str); // encodeURIComponent()로 인코딩한 문자열을 디코딩하는 함수

 

   Hex

var str = "ABCD"; 
String.prototype.hexEncode = function(){ 
    var hex, i; 

    var result = ""; 
    for (i=0; i<this.length; i++) { 
        hex = this.charCodeAt(i).toString(16); 
        result += ("000"+hex).slice(-4); 
    } 

    return result; 
} 

String.prototype.hexDecode = function(){ 
    var j; 
    var hexes = this.match(/.{1,4}/g) || []; 
    var back = ""; 
    for(j = 0; j<hexes.length; j++) { 
        back += String.fromCharCode(parseInt(hexes[j], 16)); 
    } 

    return back; 
} 
str = str.hexEncode(); // 0041004200430044 
str = str.hexDecode();

 

 

   escape - unescape

 

escpae - 문자열의 각 문자들을 '%16진수코드값' 형태로 변환

unescape - 유니코드 문자를 디코딩 (escape 로 변환된 코드값만 문자로 변환) 

1바이트 = %xx  

2바이트 = %uXXXX 

var str = "abc&%#"; 
escape(str); // abc%26%25%23" 

 

   html

var str = "<html><body>hi</body></html>";

function htmlEncode(value){
  // Create a in-memory element, set its inner text (which is automatically encoded)
  // Then grab the encoded contents back out. The element never exists on the DOM.
  return $('<textarea/>').text(value).html();
}

function htmlDecode(value){
  return $('<textarea/>').html(value).text();
}

htmlEncode(str); // "&lt;html&gt;&lt;body&gt;hi&lt;/body&gt;&lt;/html&gt;"

 

   Unicode

var str = "ab1234";
charToUnicode = function(str) {
  if (!str) return false; // Escaping if not exist
  var unicode = '';
  for (var i = 0, l = str.length; i < l; i++) {
    unicode += '\\' + str[i].charCodeAt(0).toString(16);
  };
  return unicode;
}

UnicodeTochar = function(str) { 
  
  if (!str) return false;
  var char = str.split('\\');
  var result = "";
  for ( var i = 1; i< char.length; i++)
  {
    result += String.fromCharCode(parseInt(char[i],16));
  } 
  return result;
}

charToUnicode(str); // "\61\62\31\32\33\34"

 

  Ascii

charToAscii = function(str) { 
  
  if (!str) return false;
  var result = "";
  for ( var i = 0; i< str.length; i++)
  { 
    result += str.charCodeAt(i)+',';
  } 
  return result.slice(0,-1); // 마지막 추가되는 문자(,) 제거
}

AsciiToChar = function(str) { 
  
  if (!str) return false;
  var char = str.split(',');
  var result = "";
  for ( var i = 0; i< char.length; i++)
  {
    result += String.fromCharCode(char[i]);
  } 
  return result;
}

 

 

 

   textarea 스크롤바 최상하단 조절

var maxVal= TextArea00.vscrollbar.max;
TextArea00.vscrollbar.pos = maxVal;

var minVal= TextArea00.vscrollbar.min;
TextArea00.vscrollbar.pos = minVal;

 

   textarea 소스코드 복사   

<script>

function copy_text_fun(text) {
    // creating textarea of html
    var input = document.createElement("textarea");
    //adding p tag text to textarea 
    input.value = text;
	document.body.appendChild(input);
    input.select();
    document.execCommand("Copy");
    // removing textarea after copy
    input.remove();
    alert("소스코드를 복사하였습니다.");
}
</script>
<div style="overflow:scroll; width:150px; height:75px; border-right-style : dotted;">
<pre style="font-size: 1%; color:blue;" id="code_input"><input type="button" value="소스코드 복사" style="font-size:16px; color:black; font-weight:bold;" onclick="copy_text_fun(this.closest('#code_input').innerText)" /> 
Code here
</pre>
</div>

 

   a href 이동 이벤트 삭제   

  $('a').on('click', function (event) {
        alert ( event.target.href + " 링크 이벤트 제거 ") ;
        event.preventDefault()
 });

 

   뒤로가기 이벤트 호출 및 감지

// 뒤로가기 이벤트 호출
history.pushState(null,null,location.href);
// 뒤로가기 이벤트 감지
window.onpageshow = function(event) 
{ 
if ( event.persisted || (window.performance && window.performance.navigation.type == 2)) 
    { 
      alert(""); 
    } 
}

 

   주소 파라미터 제거

history.replaceState({}, null, location.pathname);

 

   드래그된 텍스트 치환

$(document).ready(function () {
$("textarea").mouseup(function () {
var orgTxt = $("textarea").val();
var txt = "";

if (window.getSelection) {
txt = window.getSelection();
} else if (document.getSelection) {
txt = document.getSelection();
} else if (document.selection) {
txt = document.selection.createRange().text;
} else {
return;
}

txt = String(txt); // Type Casting

$("textarea").val(orgTxt.replaceAll(txt, "!" + txt + "!"));
});
});

 

   트리거(trigger)

// 콤보박스 체크 감지 트리거
<select class="check">
<option value="one">one</option>
<option value="two">two</option>
</select>

$('.check').val('two').trigger('change');

// 라디오 버튼 클릭 트리거
$("#radio").trigger('click');

 

   쿠키 조작

/* 쿠키 생성 */
  var setCookie = function(name, value, exp) {
      var date = new Date();
      date.setTime(date.getTime() + exp*24*60*60*1000);
      document.cookie = name + '=' + value + ';expires=' + date.toUTCString() + ';path=/';
  };
  // setCookie(변수이름, 변수값, 기간);
  setCookie("cookie_name", "true", 1);

/* 쿠키 조회 */
  var getCookie = function(name) {
      var value = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
      return value? value[2] : null;
  };
  // getCookie(변수이름)
  var is_expend = getCookie("cookie_name");
  console.log("쿠키 is_expend변수에 저장된 값: "+is_expend);

/* 쿠키 삭제 */
  var deleteCookie = function(name) {
      document.cookie = name + '=; expires=Thu, 01 Jan 1999 00:00:10 GMT;';
  }
  // deleteCookie(변수이름)
  deleteCookie('name');
  
/* 쿠키 초기화 */
function deleteAllCookies() {
    var cookies = document.cookie.split(";");

    for (var i = 0; i < cookies.length; i++) {
        var cookie = cookies[i];
        var eqPos = cookie.indexOf("=");
        var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
        document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
    }
}
deleteAllCookies();

/* 로컬 스토리지 초기화 */
window.localStorage.clear()

 

 

  타이머 함수( 3초 뒤 실행 - 한 번만 )

setTimeout(function() {
alert("3초 경과");
}, 3000);

 

  붙여넣기 데이터 가져오기 ( 텍스트/이미지 )

if ( ClipboardEvent ) { 

	window.addEventListener('paste', ({ clipboardData: { items } }) => {
		for (const item of items) {
			if (item.type.includes('image')) {

				const blob = item.getAsFile();

				var reader = new FileReader();
				reader.readAsDataURL(blob); 
				
				reader.onloadend = () => { 
					const base64data = reader.result;
					// 이미지 데이터 - base64
				}   
			}

			if (item.type === 'text/plain') {
				item.getAsString((text) => {
					console.log("paste: ", text);
				});
			}
		}
	});
}

 

  현재 페이지에 모든 이미지 다운로드

function downloadURI(uri, name) { var link = document.createElement("a"); link.download = name; link.href = uri; 
document.body.appendChild(link); link.click(); document.body.removeChild(link); delete link; }

function down_request() {

	let i=0;
    let list = document.getElementsByTagName('img');
    for (let imge of list) { // 이미지 태그 저장
        imageUrl = imge.src;
        i++;
    
    try {  // 이미지 다운로드
        (async () => {
          const response = await fetch(imageUrl)
          const imageBlob = await response.blob()
          const reader = new FileReader();
          reader.readAsDataURL(imageBlob);
          reader.onloadend = () => {
            const base64data = reader.result;
            downloadURI(base64data,  (i.toString())+"_abcd.png");
          }
    })() } catch(error) { }
  }
}

down_request(); // 다운로드 함수 호출

 

  이벤트 전파 중지

document.getElementsByClassName("test class")[0].addEventListener('click',
function() { event.stopPropagation(); alert(1); }, false);

 

반응형
저작자표시 비영리 동일조건

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

Jquery 함수 모음  (0) 2019.07.04
CSS(Cascading Style Sheet) 문법  (0) 2019.06.18
웹 해킹 기법 XSS (cross site scripting)  (0) 2017.07.10
html 프레임을 이용해서 페이지분할하기  (0) 2017.06.02
로그인 폼 작성  (0) 2017.06.02

'프로그래밍/웹' Related Articles

티스토리툴바