이번엔 저번 포스팅에서 다룬 table, tr, td 태그를핸들링을 해보도록 하자. 저번 포스팅과 다르게 rowSum function을 추가했다. 그리고 행을 추가할때도 "수량" 이라는 로우에는 onkeyup 을 추가했다.onkeyup에 this를 파라미터로 넘겨주었다. rowSum 함수에서는 parentNode를 2번이용해 tr 태그 까지 접근한다.(input 태그 -> td태그 -> tr태그) cells를 이용해 내가 입력한 로우의 열에 접근한다. cells[0]은 과일이름 [1]은 가격 [2] 은 수량이 된다. 가격을 입력하고 수량을 입력하면 가격 * 수량의 합계금액이계산되어 자동으로 입력되어지게 된다.
HTML에서 table, tbody, tr, td 를 이용해 간단하게 표를 만들고 버튼을 눌러 행을 추가하는 기능을 만들어보자. 일단 행을 추가해줄 버튼과 아이디, 이름, 전화번호, 주소를 td 태그를 이용해 만들어 주자.이제 "로우추가" 라는 버튼을 누르면 행이 추가될 수 있도록 function을 만들어주자. 간단하게 insertRow() 를이용해 행(로우)을 추가할 수 있다.insertCell() 은 열을 추가하는 것인데 insertRow 가 tr 태그를 추가하는거라면inserCell은 td 를 추가하는 것이다.innerHTML을 이용해 input 태그를 넣어줬다. 로우추가 버튼을 누르면 아래와같이 로우가 추가되고innerHTML을 이용해 input 태그가 들어가 있는 상태이므로아래처럼 값을 입력할 ..
jQuery는 앞단에서 중요 핵심이라고 생각한다. 제이쿼리를 사용할때 타겟을 잘 잡아서원하는 값을 java단으로 보내줘야 원할하게데이터가 흐를수 있다. 제이쿼리는 책을보며 따라치는 것도좋지만 미리 만들어져 있는 예제들을수정해보며 타겟잡는 연습을 해보는것이 좋다고 생각한다.아래 링크에 들어가 https://www.w3schools.com/jquery/jquery_traversing_descendants.asp 여러가지 제이쿼리 예제를 볼수 있으며 아래처럼 Try it Yourself 를 눌러실행 예제를 볼수있다. 소스를 직접 수정해 Run을 눌러 실행도 해볼 수 있다.
로그인, 회원가입 등 화면에서 우리는 여러가지 값을 입력 할때가 많다. 로그인을할때 ID에 우린 영어를 입력하고주소, 이름 등에는 한글을 입력한다. 입력 폼을 우린 jsp에서 input 태그를 사용하는데input 태그를 사용해 기본적인 로그인, 회원가입 등에서쓰이는 입력 폼을 만든다. 회원가입을 할때 이름, 주소에는 보통 한글을 입력한다.근데 간혹 영어부터 입력되는 사이트들이 있다. 또한 로그인을 할때도 ID란에 우린 영어를 입력해야 하는데한글이 써지는것을 보고 꼭 한/영 버튼을 누른다.별거 아니지만 굉장히 귀찮다. 그래서 이를 방지하기 위해 input 태그에서 ime-mode라는 style 속성을사용할 수 있다. ime-mode를 통해 한글 또는 영어를 기본값으로 넣어입력되는 언어를 선택할 수있다. 사..
자바스크립트를 공부했을때Date를 사용해 오늘 날짜를 구했을때가 있었다.new Date()를 사용했는데오늘 회사에서 새로운 사실을 알았다. Date 에서 난 연도를 가져올때 당연히 getYear()로값을 가져올 줄 알았는데getYear() 이 아닌 getFullYear()로연도를 가져온다는 것이였다. 지금까지 공부해오면서 사실 new Date() 를 사용해본적이자바스크립트를 공부할 때 처음에 한 번 써본게 다 였던것같다. 왜냐하면 현재 연도나 오늘 날짜를 가져올 일 이 없었기 때문이다.게시판같은걸 만들때 오늘 날짜와 현재 시각을 insert할때는그냥 DB에서 바로바로 넣을 수 있었기 때문에new Date() 같은게 필요없었다. 근데 오늘 오랜만에 자바스크립트로오늘날짜를 구해오는 부분을 봤다.오늘 날짜가 ..
jQuery에서 문서 객체의 내부 검사에 사용되는 메소드는 2가지가 있다.html(), text() html()은 문서 객체 내부의 글자와 관련된 모든 기능을 수행한다.(html태그인식)text()는 문서 객체 내부의 글자와 관련된 모든 기능을 수행한다. 위 두 메소드의 차이는 html태그의 인식 여부이다.간단하게 아래와 같이 테스트를 해보자.
jQuery의 배열 객체는 따로 만들지 않고 선택자로 여러 개의 문서 객체를 선택할 때 생성된다. 간단하게 style태그를 생성해 하이라이트를 넣어주자15line의 addClass는 문서 객체에 class속성을 추가하는 메소드이다.반대로 removeClass 가 있으며 이 메소드는 문서 객체의class 속성을 제거한다. addClass를 사용해서 h1태그에 하이라이트가 적용된다. 아래는 크롬 개발자도구로 확인한 모습이다. 이제 이번 포스팅의 주제인 배열관리를 위한 each를 알아보자. 17line에서 $('h1')으로 타겟을 잡게되면h1태그 전체를 다 잡게된다. body태그에는 5개의h1태그가 있으므로 5개의 h1태그를 잡게 되는것이다. each를 사용해 5개의 각 객체를 다르게 설정 할 수 있다.테스트..
자바스크립트 배열에 들어 있는 내용을 HTML 페이지에 출력하는 방법이다.script에 배열 array를 선언한다.그 안에 4개의 객체를 만들어주고속성은 name 과 link가 있다. 출력을 위해 $.each()를 만들어준다. 매개변수로 index와 item을 갖는다.index는 배열의 인덱스 또는 객체의 키를 의미하고item은 해당 인덱스나 키가 가진 값을 의미한다.
