본문 바로가기
반응형

분류 전체보기

 (133)
JavaScript로 select 태그에 option 요소들 나중에 추가하기 (appendChild) - 전체적인 흐름 - > select 태그 중에 id가 sales_type인 요소를 선택하기 > option 태그를 요소로 만들기 > option 태그 안에 넣고 싶은 텍스트 값 넣기 > 새로 만든 option 요소를 select 태그 안에 넣기 전체 function listSelectOptionSalesType(list) { list = ['opA', 'opB', 'opC']; //서버에서 받아오는 배열 let sel = document.querySelector('#sales_type'); //select 태그 중에 id가 sales_type인 요소를 선택하기 list.forEach(function(item, index) { //배열 요소들을 가지고 반복문 let newOption = document...
<select> 태그 안에서 선택된 <option> 값 가져오기 (options.selectedIndex) 전체 ups type1 type2 type3 type4 type5 type6 type7 type8 type9 위래처럼 select 태그가 있고 그 안에 option 태그들이 있다. 여기서 사용자가 어떤 option을 선택했는지 값을 받아오려면 어떻게 해야 할까? document.querySelector('#sales_type').options 위처럼 select태그.option 를 console로 출력했을 때 아래처럼 나온다. HTMLOptionsCollection(11) [option, option, option, option, option, option, option, option, option, option, option, selectedIndex: 6] 0: option 1: option 2: o..
select 태그에서 option 선택 값 바뀔 때마다 이벤트 걸기 (on change) 사용자가 select 태그에서 상위 카테고리의 값을 선택할 때마다 하위 카테고리의 목록이 바뀌도록 이벤트를 주려고 한다. select 태그가 갖는 onchange라는 요소를 추가하려고 했다. 하지만 값이 함수로 안 가고 문자열로 바뀌어서 들어갔다. let testch = function() { alert('change1'); } let sel = document.querySelector('#sales_type'); sel.setAttribute('onchange', testch); //결과 함수를 직접 주지 않고, 함수 이름만 전달하기로 했다. 그러면 그 이름을 갖는 함수를 script에서 찾아서 실행할 것이다. 아래처럼 하니 정상적으로 함수가 실행됐다. let sel = document.querySel..
JavaScript 이벤트 객체란? 구조와 내용, 속성 값 꺼내 오기 1 서버 ABC111 젤조은 IBM 30000 2 PC DEF24 참조은 LG 30000 3 서버 ABC111 왕조은 APPLE 30000 - 이벤트 객체란? - 이벤트 객체란 어떤 이벤트가 일어났을 때 그와 관련된 전반적인 정보들을 저장하고 있는 객체를 말한다. 예를 들어서 '자동차 사고'라는 이벤트가 일어났다고 생각해 보자. 그러면 그 자동차 사고와 관련된 주변 정보들이 있을 것이다. 사상자는 없는지, 언제 사고가 났는지, 어떤 도로에서 사고가 났는지. 사고가 난 차종은 무엇인지, 앞 차는 누가 타고 있었고 뒤 차는 누가 탔었는지, 등등 관련된 정보들이 궁금할 것이다. 페이지에서도 마찬가지다. 예를 들어서 클릭 이벤트가 발생했다면 무엇을 클릭했는지, 언제 클릭했는지, 클릭했을 때 화면은 얼마나 큰지,..
mySQL 에서 insert into 구문 한 번에 여러 줄 추가하기 INSERT INTO tb_sales(sales_type,sales_nm,model_code,price,model_nm,photo,mfcomp,info) VALUES ("type1", "name1", "code1", "123456", "테스트1", null, "fct1", "info1"), ("type2", "name2", "code2", "223456", "테스트2", null, "fct2", "info2"), ("type3", "name3", "code3", "323456", "테스트3", null, "fct3", "info3"); mySQL에서 insert into 구문을 사용할 때 values 부분만 여러 줄 입력하면 한 번에 여러 행을 넣을 수 있다.
나중에 추가한 자식 요소에 이벤트 추가하기 (delegated event) - 테이블 자식 요소 추가하기 - 과일 정보와 가격을 보여주는 table 요소를 만들려고 한다. table 안에 있는 tbody 태그는 id가 fruitTbody 이다. 서버로부터 데이터를 전달 받아 행을 하나씩 추가한다. 서버가 매개변수를 리스트 형태로 전달해 주면, 그 리스트를 가지고 반복문을 돌리면서 tr 태그 안을 하나하나 채운다. 이렇게 완성한 행들을 추가한 뒤에, 각각의 행에 이벤트를 걸어 줘야 한다. 행 하나를 클릭했을 때, 그 과일의 상세 정보를 보여줄 예정이다. function inputFruitRows(fruitList) { $.each(fruitList, function(index, item) { let newRow = ' '; newRow += ' '; newRow += item.n..
여러 계층에 걸쳐서 자식 요소를 선택하는 방법 jQuery 선택자 모델 번호 색상 모델명 제조사 console.log($('#model_code')); //O console.log($('input#model_code')); //O console.log($('tbody#tbodyProductDetail tr td input#model_code')); //O console.log($('tbody#tbodyProductDetail input#model_code')); //O console.log($('tbody#tbodyProductDetail > tr > td > input#model_code')); //O console.log($('tbody#tbodyProductDetail > input#model_code')); //X - 태그 요소 선택하기 - jQuery를 이용해..
Spring이 service 인터페이스와 serviceImpl 를 연결하는 법 - spring에서 @Autowired 쓰기- 나는 학원에서 조금 다르게 배웠다. MVC 패턴을 구현할 때 구조가 조금 달랐다. controller > dao > database 구조로 배웠다. 지금 새로 공부하면서 구조가 조금 다르다는 것을 알게 됐다. 이런 식으로 더 많이 쓰는 듯했다. controller > service > dao > database 그전에는 비지니스 로직을 컨트롤러에서 주로 처리했다. 아마 프로그래밍을 처음 배우는 단계이다 보니 그렇게 복잡한 기능을 구현하지는 않았기 때문이라고 생각한다. 하지만 규모가 커지면 비지니스 로직을 주로 다루는 단계가 따로 필요해진다. controller는 클라이언트와 서버가 데이터를 주고 받는 활동을 주로 다룬다. dao는 데이터베이스와 왔다 갔다하는..
반응형

티스토리툴바