본문 바로가기

전체 글

 (133)
dom 이벤트 dom 이벤트 발생addEventListener 메소드를 이용하여 이벤트를 발생시킬 수 있다. ▶ 클릭 이벤트클릭이벤트   id="myBtn"를 가진 버튼을 생성한다. 객체 검색 메서드로 myBtn이라는 아이디를 가진 객체를 찾아, myBtn 의 주소값을 myBtn이라는 변수에 대입한다.myBtn변수의 메서드중 클릭시 다음과 같은 함수를 발생시키도록 하자.  버튼 클릭시 콘솔창(f12)에 클릭 이벤트 발동 이라는 문구를 띄게 하였다.  ▶ 키보드 이벤트  text박스를 하나 생성하고, onkeypress라는 속성을 걸어준다. myKeypress 라는 변수에 함수를 할당한다. 입력박스에 키보드로 입력시 바로 콘솔창(f12)에 출력한다. ▶ 체인지 이벤트 (select) :: 선택 :: 옵션1 옵션2..
dom 객체 사용 dom 객체 사용 ▶ dom객체 속성 ☞ 테그 검색하거나 삽입하기 innerHTML, innerText 의 속성으로 접근 및 요소 값 변경 가능 안녕하세요. myTag 라는 아이디를 가진 태그에 접근하여 속성값을 변경하였다. ☞ 다중 객체에 접근하여 반복문 풀기 checked 클래스 이름이 같을 경우 클래스명으로 객체를 검색하면 배열이 찾아진다. 찾아진 배열로 반복문을 만들어 보자. var checked = document.getElementsByClassName('myCheck'); for(var i=0;i 해당 객체에 커서 이동하기. 아래 상태는 위와 같이 폼 테그에 focus 속성을 부여한 것이다. 커서가 텍스트박스를 가르킴. ☞ 버튼 onclick 속성 버튼을 클릭시 onclick 속성을 부여했기..
dom 객체 document object model - dom 문서 객체 모델. 문서의 정보가 담아져 있다. 문서의 해당 태그들을 document가 가지고 있다. document 라는 변수명으로 문서에 접근 할 수 있다. ▶ 객체 검색 메서드 ◈ 아이디 검색 document.getElementById('아이디명'); 아이디로 객체를 검색해 해당 테그를 찾아준다. 다음 사진은 해당 메서드의 사용방법이다. ◈ 태그 명 검색 document.getElementsByTagName('태그명'); 태그로 객체를 검색해 해당 테그를 찾아준다. 다음 사진은 해당 메서드의 사용방법이다. 다수의 값인 경우 배열로 만들어 진다. 태그 네임일 경우 다수의 값이 존재할 수 있기 때문에 getElementById와는 다르게 Elements이..
자바 스크립트의 객체 객체 자바스크립트는 객체 기반의 언어이며, 객체는 기능과 속성을 가진다. 또한 변수에 메모리를 할당하면 객체가 된다. 직접 자료형 타입에 맞춰 객체를 생성할 수 있고 속성도 생성할수 있다. 1) 객체.메서드(); - 객체의 메서드를 실행한다. 2) 객체.속성; - 객체의 속성값을 가져온다. 3) 객체.속성=값; - 객체의 속성값을 변경한다. ▶ 객체란? 1. 자바스크립트 객체는 {} 형태로 선언이 가능하다. 2. 자바스크립트의 객체의 속성은 {키:값} 으로 이루어진다. 3. 객체의 값에는 함수, 객체, 배열, 문자열, 숫자 등 모든 데이터를 포함 할 수 있다 4. 객체의 속성은(속성의 값 기준) 데이터 값을 이야기 하며, 메소드는 속성이 함수 일 때 이야기 한다. - 기본 자료형 혹은 내장 객체의 값으로..
서브쿼리 실습 서브쿼리 실습 1. 1부터 시작하는 행의 번호를 포함하여 상품테이블을 출력하시오. SELECT (@rowNum:=@rowNum+1) AS '행번호' ,g.* FROM tb_goods AS g ,(SELECT @rowNum:=0) r 더보기 2. 상품테이블의 단가 중 단가가 높은 상품 순서대로 순위를 포함하여 상품테이블을 출력하시오. SELECT (case when (@cValue = g.g_price) then @rowNum when (@cValue := g.g_price) then (@rowNum := @rowNum+1) END )AS '순위' ,g.* FROM tb_goods AS g ,(SELECT @rowNum:=0, @cValue:=NULL) r ORDER BY g.g_price DESC; 더보..
다중 테이블 연산 - UNION UNION 란? 여러 개의 쿼리의 합집합으로, 여러 개의 SQL문을 합쳐 하나의 SQL문으로 만들 때 사용한다. ▶ UNION의 규칙 ★ • 각 SELECT의 컬럼의 수가 같아야 한다. • 컬럼명이 같아야 한다. ( 같지 않을 경우 alias를 사용하여 같게 만듦) • 컬럼별 데이터타입이 같아야 한다. ( 반환 가능한 형태 ) • 하나의 ORDER BY만 사용한다. • SELECT문들의 순서는 상관없다. ▶ UNION의 종류 • UNION : 여러 개의 쿼리의 중복 값을 제거한 결과를 출력한다. DISTINCT 키워드를 따로 명시하지 않아도 중복되는 레코드를 제거하여 출력한다. • UNION ALL : 여러 개의 쿼리 결과가 중복이 되더라도 전부 결과에 반영하여 출력한다. UNION에서는 중복되는 결과를..
서브쿼리(Sub Query) 서브쿼리(Sub Query) 서브쿼리란 SQL 문 내에서 하위에 존재하는 쿼리이다. (SQL문 안에 SQL문이 존재한다는 의미.) ▶ 서브쿼리의 종류 - 인라인 뷰 (FROM) FROM 절에 있는 서브쿼리 SELECT g.g_code ,g.g_name ,g.g_price ,g.g_seller_id ,g.g_reg_date FROM tb_goods AS g JOIN ( SELECT ROUND(AVG(g.g_price), 0) AS '평균단가' FROM tb_goods AS g) AS gAvg WHERE g.g_price > gAvg.평균단가; - 스칼라 서브쿼리 (SELECT) SELECT문에 있는 서브쿼리 SELECT g.g_code ,g.g_name ,g.g_price ,g.g_seller_id ,g...
JSP와 DB연결 - 로그인 기능(DB연결) 로그인기능 예전에 했던 로그인 기능을 생각해 보자. session을 응용하여 파일 내에서 선언해둔 변수(아이디,패스워드)의 값과 일치 불일치를 따져보고 로그인에 성공하고 실패하고 유지되는 작업을 해보았었다. 하지만 오늘 할 로그인 기능은 데이터베이스에 저장된 아이디, 패스워드 값을 로그인폼에서 입력한 값과 비교를 하여 로그인에 성공하고 실패하고 유지되는 작업을 해볼것이다. ▶ 로그인 기능 구현 1. 파일 구성 WebContent 폴더 하위에 login 폴더와 index.jsp 파일을 만들었다. index.jsp파일은 로그인 유지가 되는 메인 홈 화면이고, login 폴더 안의 jsp파일은 각각 - login_form : 로그인 정보를 입력할 수 있는 화면이다. - login_pro : 데이터베이스에 연결..

티스토리툴바