목록공부/JavaScript (21)
kimmgamjja
extend() 다수의 객체를 하나의 객체로 합친다. - $.extend (대상, 객체1, 객체2, ... , 객체n) - 객체가 동일한 프로퍼티를 가지게 되는 경우 나중에 덮어씌어지는 값이 최종값으로 남게 된다 objA = { a: 1, b: 2 }objB = { b: 3, c: 4 }objC = $.extend({}, objA, objB); // { a: 1, b: 3, c: 4 }// objC['a'] = 1// objC['b'] = 3 objB의 b값으로 덮어씌워짐// objC['c'] = 4 objA = { a: '1', b: { b1: 100, b2: 200}}objB = {b: { b2: 300, b3: 300}, c: '4'}objC = $.extend({}, objA, objB);o..
문자열로 변환1. String()var tt = 2alert(typeof tt); // Result : numbertt = String(tt);alert(typeof tt); // Result : string 2. 숫자에 문자열 더하기var tt = 2tt += "";alert(typeof tt); // Result : string 3. toString()var tt = 2; // Numbertt = tt.toString();console.log(typeof tt); // Stringvar arr = ['today', 'yesterday', 'hello', '1', 'bye'].toString();console.log(arr); // "today,yesterday,hello,1,bye"숫..
1. bind(eventType,handler) - 이벤트 등록 - id가 btn이라는 요소에 이벤트 핸들러를 추가한다.- eventType은 click, handler는 클릭이라는 문구를 출력하는 alert 창이 나오도록 함수를 지정한다- id가 btn요소를 클릭 시 '클릭' 문구가 나오는 alert창이 뜬다 2. unbind( [eventType] [, handler] ) - 이벤트 제거 - id가 btn인 요소에 추가된 이벤트를 제거한다.- 매개변수가 없으면 모든 이벤트 제거- eventType 지정시 지정된 이벤트 제거- handler 지정시 click에 대한 이벤트는 남아있어도 핸들러에 해당되는 부분이 제거
1. setInterval()setInterval() 함수는 일정한 시간 간격으로 지속적으로 반복해서 작업을 실행할 때 사용하는 자바스크립트 함수이 함수를 사용하면 일정한 간격으로 코드를 실행할 수 있음setInterval() 매소드는 함수를 여러번 호출하고 , window. 구문을 생략할 수 있음var a = setInterval(test, 3000);function test(){ alert("welcome");}setInterval() 메소드는 두개의 매개변수 값 function과 milliseconds 사용function: 실행할 코드 블록을 포함하는 함수milliseconds: 이 매개변수는 각각의 함수 호출 사이의 시간 간격을 나타낸다. 간격은 밀리초 단위이고 코드가 실행될 빈도를 정의한다. ..
$.ajax() 혹은 $.getJson() 호출 전에 $.ajaxSetup({ async: false }) 를 호출하면 비동기에서 동기로 바꿀 수 있다.$.ajaxSetup({ async: false }); // getJson 비동기 -> 동기$.getJSON("test/test1", function(){ ...}); async: false / 동기 async: true / 비동기* $. ajaxSetup()- $.ajax() 에 대한 기본 요청(옵션)을 설정할 수 있음- $.ajaxSetup() 을 설정하고 $.ajax() 실행- 모든 함수를 사용하는 이후의 모든 ajax 호출은 $.ajaxSetup() 의 다음 함수까지 개별 호출에 의해 재정의 되지 않는 세팅된 그대로 실행됨asyncboo..
selectbox 변경( change 이벤트가 발생하기 ) 전 seletbox 값을 확인하는 방법 - change 이벤트 전에 focus이벤트를 줘서 값을 확인하면 된다$("select[name='test']").on('focus', function () { console.log("before: "+this.value);}).change(function() { $(this).blur(); console.log("after: "+this.value);}); * focus() - 요소가 포커스를 받을 때 발생 ex)$("select[name='test']").on('focus', function () { console.log("포커스 이벤트");}); name이 test인 selectbox를 클릭했을 때..
클릭 이벤트가 누적될 경우 이벤트가 누적된 횟수만큼 alert 함수가 실행되어버림 $("#btn").click(function(){ alert("경고");}); - off("click") 혹은 e.preventDefault() 사용하면 클릭 이벤트 누적/중복을 방지할수 있음 $("#btn").off("click").click(function(e){ e.preventDefault(); alert("경고");})
자식창에서 부모창 제어하기 - window.opener 1. JQuerylet bookmarkListElm = $(window.opener.document).find("#header-bookmark-scroll").find(".simplebar-content") 2. JavaScriptconst bookmarkElm = window.opener.document.querySelector("#header-bookmark-scroll");
1. 줄바꿈(개행: Multi-line strings)- 백틱(`)으로 템플릿 리터럴을 사용하면, 줄바꿈 등을 쉽게 표현할 수 있다.var str_01 = `Hi! It's me! JavaScript!So Cool!`; - 기존 따옴표 방식에서는 줄바꿈이 허용되지 않았기 때문에,→ 백슬러시(\)로 시작하는 이스케이프 시퀀스를 사용해야 했다.var str_01 = "Hi! \n\t It's me! \n\t\t\t JavaScript! \n So Cool!"; https://curryyou.tistory.com/185
.innerHtml : 태그 자체를 가져오거나 바꾸는 기능Hello, World! document.getElementById("myDiv").innerHTML = "안녕하세요!";// myDiv 내용 바뀐다안녕하세요! 하지만, - innerHtml 은 XSS 공격에 취약하다innerHTML 속성은 문자열 자체를 수정할 수 있기 때문에, 악의를 가진 해커가 태그를 사용해 JavaScript 코드를 작성한 뒤 실행되도록 만들 수 있다.이를 보완하기 위해 HTML5에서는 innerHTML 속성을 통해 삽입된 문자열에 태그가 있을 경우 실행되지 않도록 처리했지만, 다른 우회적인 경로는 여전히 열려 있다.innerHTML 속성을 사용하는 경우, 다양한 우회 공격 경로를 방어할 수 있도록 처리해놓아야 한다.이런..