728x90
반응형

JavaScript 62

[Node.js] - XMLHttpRequest / JSON.parse()로 변환된 JSON객체가 담긴 배열 구조

XMLHttpRequest는 자바스크립트에서 Ajax를 사용할때 사용되는 객체이다. var request = new XMLHttpRequest(); request.open('get','/data.json',true); request.send(); XMLHttpRequest객체의 open() 메서드에 전송방식, 전송위치, sync방식을 지정해준다. 3번째 매개변수의 true속성을 통해 sync를 비동기방식으로 설정하여 Ajax 데이터 전송을 진행하였다. var request = new XMLHttpRequest(); request.onreadystatechange = function(event){ if(request.readyState == 4){ if(request.status == 200){ conso..

[Node.js] undefined 파라미터 express.bodyParser() 대체 방식

app.use(express.bodyParser()); 위 코드방식을 사용하면 node.js 서버를 구동시킨 cmd상에 위와같은 오류가 발생한다. 해당 코드를 삭제하고 파라미터 데이터를 전송하면 아래 콘솔창과 같은 텍스트열이 출력되면서 node.js 서버를 구동시킨 cmd상에서는 파라미터값들이 undefined로 출력된다. npm에서 body-parser 를 install 해줘야한다. > npm install body-parser install 해준 뒤 script부분 대체코드 var bodyParser = require('body-parser') app.use(bodyParser.urlencoded({ extended: false })) app.use(bodyParser.json()); https://..

jQuery 선택자 $() 매개변수 context 문법 (이벤트)

선택자 $()의 형태는 $('요소') 혹은 $('속성') 과 같이 사용해왔다. ( 요소[속성=값] 혹은 요소:속성 ) 매개변수를 하나만 넣었을 경우 해당하는 요소나 클래스를 모두 찾아간다. https://u-it.tistory.com/entry/%EC%86%8D%EC%84%B1%EC%84%A0%ED%83%9D%EC%9E%90-%ED%95%84%ED%84%B0%EC%84%A0%ED%83%9D%EC%9E%90?category=1019283 속성선택자 , (입력양식)필터 선택자 / 요소[속성=값] , 요소:속성 [속성 선택자] 속성 선택자 문법은 기본적으로 요소[속성=값] 의 형태이다. 속성 선택자는 요소에 명시적으로 지정하는 name, id, class 등의 속성 값과 일치한 요소를 찾는 선택자이다. 여기서..

JavaScript/jQuery 2022.01.04

jQuery 이벤트 문법 mouseenter,mouseleave,hover() ( 이름,리스터 or 객체 or 메소드 )

$(document).ready(function (){ $('h1').on('mouseenter',function(){ $(this).addClass('reverse'); }); $('h1').on('mouseleave',function(){ $(this).removeClass('reverse'); }); }); 태그 요소에 마우스를 올려놓았을때 'reverse' 클래스 속성을 추가하고, 다시 마우스를 요소로부터 떨어트리면 추가된 'reverse'클래스 속성을 제거한다. 이와 같은 문법을 한번에 객체형태로 만들 수 있다. $(document).ready(function (){ $('h1').on({ mouseenter: function(){ $(this).addClass('reverse'); } , mo..

JavaScript/jQuery 2022.01.04

jQuery addClass() 동일한 태그의 class명을 +1 씩 증가하여 추가하는 문법

https://u-it.tistory.com/entry/each-%ED%95%A8%EC%88%98-%EC%82%AC%EC%9A%A9%EB%AC%B8%EB%B2%95 each() 함수 '요소' 관리 사용 문법 선택자를 변수에 담은 후 변수로 접근하여 사용 가능 선택자를 변수에 담은 후 변수를 매개변수로 담아 접근하여 사용 가능 Object 배열에서는 다음과같이 변수로 사용이 불가능해진다. u-it.tistory.com 지난 시간에 each 함수를 통해 요소를 반복하여 관리하는 문법을 구현했었다. $(document).ready(function (){ $('h1').each(function(index,item){ $(item).addClass('item'+index); }); }); 선택자를 지정하고 eac..

JavaScript/jQuery 2022.01.03

[jQuery] css() 함수 사용 문법 종류

1. css() 메서드의 매개변수에 {backgroundColor : 'black , color : 'white'} 와 같은 형태로 속성을 지정할 수 있다. 2. css() 메서드의 매개변수에 'background','black' 와 같은 형태로 속성을 지정할 수 있다. 1번의 형태 경우에는 $('h1').css( { backgroundColor : 'white' , color : 'red' } ) stylesheet방식과 유사한 형태로 {중괄호}안에 변경할 속성을 나열하여 한번에 지정할 수 있다. 2번의 형태 경우에는 $('h1').css('background', 'white').css('color','red') 와 같이 지정할 스타일이 복수개일 경우 메서드를 각각 두번 호출하여 설정해야한다. 주의할 ..

JavaScript/jQuery 2022.01.03

filter() 와 메서드 체이닝, end() , add() 메소드

[filter] Header-0 Header-1 Header-2 위와같이 fiter를 사용할 때 적용은 되지만 정확한 설정에 맞게 적용이 되지 않는다. 여기서 개발자가 의도하는 정확한 설정은 h1, h1의 홀수요소, h1의 짝수요소 각각의 스타일 속성을 다르게 지정한다. 하지만 위의 코드상의 순서대로 적용된다면 h1요소의 홀수에 filter를 걸고 h1요소의 홀수중 짝수에 filter가 걸리기 때문이다. filter를 한번 사용할 때 마다 h1 이라는 문서 객체의 범위가 점점 좁아진다. h1 -> h1:even(홀수) -> h1:even:odd(홀수중 짝수) [end] 올바른 범위는 h1 -> h1: even(짝수) -> h1:odd(홀수) 가 되어야 하며 end() 메서드를 사용한다. end() 메서드..

JavaScript/jQuery 2022.01.03

속성선택자 , (입력양식)필터 선택자 / 요소[속성=값] , 요소:속성

[속성 선택자] 속성 선택자 문법은 기본적으로 요소[속성=값] 의 형태이다. 속성 선택자는 요소에 명시적으로 지정하는 name, id, class 등의 속성 값과 일치한 요소를 찾는 선택자이다. 여기서 말하는 요소란 태그의 이름을 말한다. 이렇게 하면 input type이 text인 입력 양식의 value 속성이 'Hi jQuery..!' 값이 정의되고 text input박스에 Hi jQuery..! 라는 문자열 값이 입력된 상태로 페이지가 출력된다. [필터 선택자] 선택자 중에 : 기호를 포함하는 선택자이다. 필터선택자는 요소에 명시적으로 지정된 특정 속성을 찾아간다. input 요소에는 type속성 혹은 checked속성을, option 요소에는 selected속성을 찾아갈 수 있다. input 입력..

JavaScript/jQuery 2022.01.03

[Error] javascript/location.href/QueryString/ String타입/ ${EL} 파라미터 타입 오류

페이징 처리를 마치고 jQuery를 사용여 검색기능 작업중에 검색어와 검색기준을 파라미터에 담는 도중 에러가 발생했습니다. 상황은 jQuery를 사용하여 버튼을 클릭하였을때 행(row)을 몇개를 띄워줄지에 대한 작업 처리에대한 $("#count-per-page .btn-izone").click(function(){ let row = $(this).val(); //1번//location.href="/board/list?row="+row+'&page='+${page}; //2번//location.href="/board/list?row="+row+'&page='+${page}+'&keyword='+${keyword}+'&condition='+${condition}; location.href="/board/li..

[ jQuery ] select option이 selected 선택되었을때 value값을 가져오게하는법

select option이 selected 선택되었을때 value값을 가져오게하는법 코어태그립으로 selected 속성을 부여하고 form get방식으로 submit을통해 선택된 네임파라미터를 전송하는 방법을 jQuery로 구현할수 있습니다. 제목 내용 작성자 제목+내용 기본적으로 select 속성은 제목 이라는 option이 선택되었을때 제목 option의 value속성 값이 select의 name파라미터에 실려 넘어갑니다. 제목 제목이 선택된다면 condition이라는 파라미터에 title이 실려가는것입니다. 이 내용은 선택된 option을 전송하는것과는 별개인데 이 코드를보십시오 ${'selected'} c:if문의 조건은 만약 name이 condition인 select태그의 option이 현재 o..