JavaScript (46) 썸네일형 리스트형 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 - 이벤트 객체란? - 이벤트 객체란 어떤 이벤트가 일어났을 때 그와 관련된 전반적인 정보들을 저장하고 있는 객체를 말한다. 예를 들어서 '자동차 사고'라는 이벤트가 일어났다고 생각해 보자. 그러면 그 자동차 사고와 관련된 주변 정보들이 있을 것이다. 사상자는 없는지, 언제 사고가 났는지, 어떤 도로에서 사고가 났는지. 사고가 난 차종은 무엇인지, 앞 차는 누가 타고 있었고 뒤 차는 누가 탔었는지, 등등 관련된 정보들이 궁금할 것이다. 페이지에서도 마찬가지다. 예를 들어서 클릭 이벤트가 발생했다면 무엇을 클릭했는지, 언제 클릭했는지, 클릭했을 때 화면은 얼마나 큰지,.. 나중에 추가한 자식 요소에 이벤트 추가하기 (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를 이용해.. [JavaScript] var / let / const 차이점 비교 (스코프, 호이스팅, 선언) - var - - 선언 했던 변수명 또 해도 된다. var a = 1; console.log(a); var a = 3; console.log(a); - 위에서 a는 그냥 출력 된다..; - scope는 함수 단위다. 함수 밖에서 선언한 변수는 다 global 변수 취급한다. global 자체도 하나의 함수 단위처럼 작동한다. 반면에 block scope 는 없다. for/if/while 등 블록에는 scope가 적용되지 않는다. 블록에 있는 변수도 그냥 호이스팅이 적용된다. function multi() { console.log(i); //undefined console.log(a); //undefined var a = 2; for(var i = 0; i < 5; i++){ console.log(a * .. 자바스크립트가 싱글 스레드이면서 비동기인 원리 (ft. event loop) 자바스크립트는 싱글 스레드인데 비동기처럼 보이는 현상은 왜 그러는 걸까? 그건 자바스크립트 혼자서 일하는 게 아니라, 옆에 알바생을 하나 더 두기 때문이다. 바로 브라우저가 가지고 있는 Web API다. 자바스크립트는 할 일들의 리스트를 만들어 놓는다. 이 작업 리스트를 스택이라고 한다. 자바스크립트에서 무언가 실행되려면 무조건 이 스택 위에 올라가야 한다. 스택에서 무언가 실행할 때, 브라우저의 Web API로 헐 일을 넘겨 버리는 경우가 있다. 예를 들어 setTimeOut 함수나 Ajax 등이 그렇다. 이런 함수는 자바스크립트 스택에서 실행되지 않는다. 스택에서 하는 일은 web API로 넘기는 것까지다. 스택이 web api로 넘기고 나면, 자기 할 일은 끝난다. 이게 완료가 됐든 안 됐든 스택에.. 이전 1 ··· 3 4 5 6 다음
