본문 바로가기

728x90

JAVASCRIPT

(9)

[JavaScript] 함수선언문, 함수표현식과 호이스팅(Hoisting) function a() { } var a = function() { }; javascript에서 함수를 변수에 담을 수 있다. 이렇게 사용하는 것을 함수 표현식 이라고 한다. 그리고 function a()와 같이 함수를 선언하는 것을 함수 선언문 이라고 한다. 함수 표현식과 함수 선언문의 차이 ?? => 호이스팅 호이스팅(Hoisting)의 사전적 의미는 끌어 올리다 라는 뜻을 가지고 있다. 여기서도 같은 의미로 쓰인다. 함수 안에 있는 변수나 함수 맨위로 끌어올린다는 것이다. 실제로 코드가 끌어올려지는 것은 아니며, 자바스크립트 Parser가 내부적으로 끌어올려서 처리한다. 호이스팅의 대상 => var , 함수 선언문 let, const, 함수 표현식은 해당되지 않는다. 호이스팅 규칙 : 부등호가 큰 ..

AJAX 정리 AJAX란? asynchronous Javascript and XML 자바스크립트를 이용하여 비동기식으로 서버와 통신을 한다. 비동기 통신이기 때문에 서버에 요청이 가더라도 화면이 이동된다는 느낌을 주지 않고 자연스럽고 빠르게 클라이언트의 화면을 변화시켜준다. 최근에는 XML이 아닌 JSON 형식을 많이 사용 장점 웹페이지 속도 향상 서버에서 처리가 완료될 때 까지 기다리지 않고 다른 프로세스를 진행할 수 있다. 비동기 방식이기 때문에 동기 방식과 다르게 UI를 변경할 수 있다. 단점 연속으로 데이터를 요청하면 서버 부하가 증가할 수 있다. 히스토리 관리가 안되므로 보안에 취약하다. HTTP 클라이언트의 기능이 한정되어 있다. VO 생성 -> Controller 생성 후 Ajax에서 호출할 메서드 생성 ..

[JavaScript] URLSearchParams - url로 파라미터 가져오기 http://127.0.0.1/search.do?a=아욘나라&b=4400 위의 URL에서 파라미터 추출하는 방법! var kah = location.search; //location.search에는 '?a=아욘나라&b=4400' 값이 들어있다. //URLSearchParams 객체로 변환. var params = new URLSearchParams(kah); var a = params.get('a'); var b = params.get('b'); // a = '아욘나라' b = '4400' // a 또는 b의 값을 변경하는 방법 params.set('a', '아메리카노'); params.set('b', '0044');

[JavaScript] 함수 문자열 치환 text.replace("찾을 문자열", "변경할 문자열") 문자열 대문자 변환 txt = txt.toUpperCase(); 문자열 소문자 변환 txt = txt.toLowerCase(); 배열의 마지막 항목 제거 const fruits = ["Banana", "Orange", "Apple"]; fruits .pop(); 배열에 항목 추가 const fruits = ["Banana", "Orange", "Apple"]; fruits.push("Kiwi"); 배열에서 항목 제거 const fruits = ["Banana", "Orange", "Apple", "Kiwi"]; fruits.splice(1,2); // 오렌지, 애플 제거 배열 정렬 const fruits = [..

[jQuery] 함수, 이벤트 $("#id").hasClass(""); // 조건문 (id가 active를 가지고 있으면 실행) $("#id").addClass(); // 클래스 추가 $("#id").removeClass(); // 클래스 삭제 $("#id").attr("href"); // 속성 값 Get $("#id").attr("attributeName"," value") // 속성 추가(id에 attributeName 속성을 추가하고 속성 값은 value $(#"btn").click(function(){ //btn을 클릭하면 수행 될 내용 }); $(#"btn").mouseover(function(){ //btn에 마우스가 올려지면 수행 될 내용 }); $("#btn").focus(function(){ //btn에 포커스를 얻었..

문자 길이 체크 함수(mySQL 기준) function fnChkLength(obj,maxLength){ const text_val = obj.value; //입력한 문자 const text_len = text_val.length; //입력한 문자수 let length = 0; for(var i=0; imaxLength){ alert('최대'+maxLength+"글자까지만 입력가능합니다."); obj.value = obj.value.substring(0,obj.value.length-1); } } varchar(n) mySQL 4.1 이전에는 n => 바이트 mySQL 4.1 이후부터는 n => 문자 수 즉, varchar(200) 이면 아스키 문자든 한글이든 200자만큼 입력 가능하다

jQuery, Ajax 옵션 정리 accepts (default: depends on dataType) Type : PlainObject 키/값 형태이며 해더에 포함한다. 어떤 종류의 응답을 받아들일지 서버에 알려주는 역할을 한다. async (default: true) Type : Boolean 기본적으로 비동기 요청을 하도록 한다. 동기 요청이 필요하면 값을 false로 설정하면 된다. beforeSend Type: Function( jqXHR jqXHR, PlainObject settings ) 전송 전에 실행되며 false 를 리턴하게 되면 요청이 취소된다. cache (default: true, false for dataType 'script' and 'jsonp') Type: Boolean false로 설정 시 브라..

동적 이벤트 생성, 바인딩 동적 이벤트 생성 화면을 동적으로 구성하는 경우 (체크박스에 체크 or 해제 시 이벤트 발생, 게시글 목록 클릭시 등) 클릭 이벤트를 사용할 수 없음 !! $(".modalData").on("click", function(){ alert("XXX실행XXX"); }); 위와 같이 이벤트를 작성할 경우 동적으로 구성된 요소에는 이벤트가 작동하지 않음 아래와 같이 이벤트 바인딩은 document 등 상위에 걸고, 인자로 필터를 걸면 됩니다. $(document).on("click", ".modalData", function(){ alert("OOO실행OOO"); }); 적용: https://ayon.tistory.com/10

이전 1 2 다음

728x90

티스토리툴바