자바스크립트 13

[Javascript] 모든 문자열 치환하기 (replace, replaceAll)

replace() 함수는 문자열에서 변경하려는 문자열이 여러 번 반복될 경우, 첫 번째로 발견한 문자열만 치환해 줍니다. 즉, 'apple, banana, banana' 이렇게 'banana'가 여러 번 반복될 경우 replacT('banana', 'tomato')를 실행하면 첫번째로 발견된 'banana'만 치환되어 'apple, tomato, banana'의 결과를 얻게 됩니다. 간단하게 replactAll() 이라는 함수가 있다면 좋겠지만, 불행하게도 Javascript에는 replaceAll() 이라는 함수는 없습니다. ***** 제이쿼리에서는 있음!

자바스크립트 2021.05.30

[Javascript] $(document).on() ,$(document).ready() 차이점

문제 : 동적으로 생성되는 html 소스에 대한 click() 이벤트 문제 ■ $(document).on() 이 경우는 "이벤트를 위임"을 보여준다고 생각하면 된다. 이 이벤트 핸들러(event handler)는 DOM트리 보다 위에 바인딩이 되어서 Selector와 일치하는 태그를 찾아 실행한다. 대부분의 DOM 이벤트 들이 Tree의 꼭대기에서 시작해서 나뭇가지처럼 아래로 퍼지기 때문에 이것이 가능한 것이다. 그래서 해당하는 id의 태그를 클릭하면 클릭이벤트가 발생할 때 모든 부모 태그들의 사이를 이동하는 클릭 이벤트가 생성되고 그 부모 태그들과 조상 태그들은 그 이벤트를 받을 수 있게 된다. 즉 우리가 알고있는 DOM 트리(꼭대기가 html의 뿌리라고 볼수 있는 태그 부터 아래로 나뭇가지처럼 자식태..

[Jquery] AJAX 데이터 전송

1. JSON 형태 데이터 전송 1 2 3 4 5 6 7 8 9 10 $.ajax({ url: '데이터를 보낼 url', type: 'method속성 (post,get,delete,put)..., data: {"키" : "값"}, success: function (data){ alert("데이터전송 성공"); }, error: function (error){ alert("에러"); } Colored by Color Scripter cs 2. 폼 데이터를 한꺼번에 전송 1 2 3 4 5 6 7 8 9 10 11 12 var queryString = $('#폼id').serialize(); $.ajax({ url: '데이터를 보낼 url', type: 'method속성 (post,get,delete,put)..

[Javascript] JSON 이란?

JSON은 속성-값 쌍 또는 "키-값 쌍"으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다 JSON은 데이터 포맷일 뿐이며 어떠한 통신 방법도, 프로그래밍 문법도 아닌 단순히 데이터를 표시하는 표현 방법일 뿐이다. 내가 스프링 웹프로젝트를 진행할때 JSON 타입의 배열로 데이터를 보낸적이 있는데, 아래와 같이 listDate 라는 이름의 배열로 3개의 데이터를 보냈다. 안될줄알았는데 되더라.. 인덱스 형식으로 끄내서 사용가능 스프링에선 배열로 온 데이터를 어노테이션 @RequestBody VO 객체에 List 변수를 따로 선언해서 List변수로 받아서 사용했던 기억이 있다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17..

[Javascript] AJAX란?

JavaScript의 라이브러리중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자이다. 여기서, 비동기 방식이 무엇인지 궁금할것인데 우리가 웹 페이지에서 어떤 요청을 하면 화면 전체가 깜빡할것이다. 이럴경우 F12(개발자모드) 에서 네트워크 탭에서, 데이터를 확인해보면 전체 데이터를 리로드 하는경우가 있다. 이런경우 (동기 방식) 전체 데이터를 리로드 하는방식이다. 동기 - 정해진 순서대로만 진행 가능하다. (어떠한 처리를 할경우 그처리를 처리후 다른걸로 넘어간다) 비동기 - 여러개의 요청사항을 한꺼번에 진행할수 있다. ( 대표적으로 백그라운드랑 똑같은 개념이라 생각하면됨) 비동기식의 장점 페이지리로드를 할경우 전체 리소스를 다시 불러와야 하는데,..

[Javascript] 참조 타입의 특성

자바스크립트에서 기본 타입인 숫자,문자열,불린값,null,undefined 5가지를 제외한 모든 값은 객체이다. "배열"이나 "함수" 또한 객체로 취급된다.( 이러한 객체는 JS에서 참조 타입이라고 부른다) 이것은 객체의 모든 연산이 실제값이 아닌 참조 값으로 처리 되기때문이다. 1 2 3 4 5 6 7 8 9 10 11 12 //객체 생성 var objA = { val: 40, }; var objB = objA; console.log(objA.val); //출력값 40 console.log(objB.val); //출력값 40 objB.val = 50; console.log(objA.val); //출력값 50 console.log(objB.val); //출력값 50 cs objA 변수는 객체 자체를 저장..

자바스크립트 2021.01.18

[Javascript] 자바스크립트 참조타입(객체타입)

* 자바스크립트 참조 타입(객체타입) 자바 스크립트에서 숫자,문자열,불린값,null,undefined 같은 기본타입을 제외한 모든값은 객체다. 따라서 배열,함수,정규표현식 등도 모두 결국 자바스크립트 객체로 표현됨 자바스크립트에서 기본타입은 하나의 값만을 가지는데 비해, 참조타입인 객체는 여러 개의 프로퍼티들을 포함 할수 있으며, 이러한 객체의 프로퍼티는 기본 타입의 값을 포함하거나, 다른 객체를 가르킬수 있다. ( 쉽게말하면 기본타입은 변수에 값을 할당하면 알아서 하나의 데이터 타입으로 설정이되는데, 객체 타입은 객체를 생성해서 그안에 string ,number등 여러 데이터타입 값을 추가할수 있고, 호출할수 있다) * 객체 생성 자바에서는 클래스를 정의하고 , 클래스의 인스턴스를 생성하는 과정에서 객..

자바스크립트 2021.01.17

[Javascript] 자바스크립트 기본타입

모든 언어의 기본은 데이터 타입을 파악하는것에서부터 시작한다. 자바 스크립트의 값은 크게 기본타입 과 참조 타입으로 나뉜다 * 자바스크립트 기본타입 자바 스크립트 에는 기본타입인 숫자,문자열,불린값,null,undefined 라는 타입이 있다 자바 스크립트는 느슨한 타입 체크 언어이다. 엄격한 타입 체크 언어인 C언어나 java같은 언어는 변수를 선언할때 변수의 데이터 타입을 지정해야한다 .(int i = 0; 과같이) 그리고 지정된 변수의 데이터타입에 맞게 해당 변수에 값을 저장하고 사용하는것이 일반적이다. 반면 자바스크립트는 변수를 선언할때 타입을 미리 정하지않고 ,var 라는 키워드로 변수선언함(요즘은 let도 있음) * 숫자 자바스크립트에는 하나의 숫자형만 존재한다. 자바스크립트는 모든 숫자를 6..

자바스크립트 2021.01.17