============복습============
JDBC프로그램의 일반적인 실행 순서는 다음과 같다.
 1. JDBC 드라이버 로딩
 2. 데이터베이스 커넥션 구함
 3. 쿼리 실행을 위한 Statement 객체 생성
 4. 쿼리 실행
 5. 쿼리 실행 결과 사용
 6. Statement 종료
 7. 데이터베이스 커넥션 종료


============================================================



DB생성

SQLite
DB 생성 => id부여 => table 생성

Orcle 
일반계정 생성(ex:hr, scott) : DB생성이된거
명시적 DB생성을 안해도 계정생성시 같이 생성됨
 => table 생성

Form(입력창) => JSP => 자바빈 => 자바 클래스(DAO: Data Access Object) <=> DB 

오라클을 사용할때. 작업들가기전 확인해야될것.

제어판 관리도구 서비스 에서  Listener 와 ORCL 시작확인






insertTestForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>레코드 삽입 (추가 ) 예제</title>
</head>
<body>
<h2>member1 테이블에 레코드 삽입(추가)예제</h2>
<form method="post" action="insetTest.jsp">
아이디: <input type="text" name="id"><br/>
패스워드: <input type="password" name="passwd"><br/>
이름: <input type="text" name="name"><br/>
    <input type="submit" value="보내기">
</form>
</body>
</html>

insertTest.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<%
    request.setCharacterEncoding("utf-8");
     
    //전송된 데이터 처리
    String id =request.getParameter("id");
    String passwd =request.getParameter("passwd");
    String name =request.getParameter("name");
    
    //전송되지 않은 데이터를 jsp에서 생성함(날짜/시간)
    Timestamp register= new Timestamp(System.currentTimeMillis());
    
    Connection conn=null;
    PreparedStatement pstmt=null;
    
    try{
            String jdbcUrl="jdbc:oracle:thin:@localhost:1521:orcl";
            String dbId="hr";
            String dbPass="hr";
            
        //JDBC 패턴을 아는것이 중요하다.
        //JDBC 수행1단계 : JDBC driver 로드
        Class.forName("oracle.jdbc.driver.OracleDriver");
        //JDBC 수행2단계 : Connection 객체 생성
        conn=DriverManager.getConnection(jdbcUrl,dbId,dbPass);            

        //String sql ="insert into member1(id,passwd) values(?,?)";//특정 컬럼일경우 명시해야함    
        //String sql ="insert into member1(id,passwd,name,register) values(?,?,?,?)";//컬럼명을 명시해야하지만 전체입력이라 생략
        //? : 바인드 문자
        String sql ="insert into member1 values(?,?,?,?)";
            
        
        //JDBC 수행3단계 : PreparedStatement 객체 생성
        //conn.prepareStatement : 에 sql문장 보관
        pstmt=conn.prepareStatement(sql);
        //각각의 바인드 문자에 매칭시킴
        pstmt.setString(1, id);
        pstmt.setString(2, passwd);
        pstmt.setString(3, name);
        pstmt.setTimestamp(4, register);
        
        //JDBC 수행4단계 : SQL문 실행
        pstmt.executeUpdate();
        
    }catch(Exception e){
        e.printStackTrace();
    }finally{
        //자원정리
        if(pstmt !=null) try{pstmt.close();}catch(SQLException sqle){}
        if(conn !=null) try{conn.close();}catch(SQLException sqle){}
    }
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>레코드 삽입 (추가) 예제</title>
</head>
<body>
    member1 테이블에 새로운 레코드를 삽입 (추가) 했습니다.
</body>
</html>



selectTest.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%> 
<%@ page import="java.sql.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <h2>member1 테이블의 레코드를  화면에 표시하는 예제</h2>
    <table width="550" border="1">
    <tr>
        <td width="100">아이디</td>
        <td width="100">패스워드</td>
        <td width="100">이름</td>
        <td width="100">가입일자</td>
    </tr>
<%
    Connection conn=null;
    PreparedStatement pstmt=null;
    ResultSet rs=null;
    
    try{
        String jdbcUrl="jdbc:oracle:thin:@localhost:1521:orcl";
        String dbId="hr";
        String dbPass="hr";
        
        //JDBC 수행1단계 : JDBC driver 로드
        Class.forName("oracle.jdbc.driver.OracleDriver");
        //JDBC 수행2단계 : Connection 객체 생성
        conn=DriverManager.getConnection(jdbcUrl,dbId,dbPass);
        
        String sql ="select * from member1";
        //JDBC 수행3단계 : PrepareStatement 객체생성
        pstmt=conn.prepareStatement(sql);
        //JDBC 수행4단계 : SQL문 실행
        //JDBC 수행5단계 : SQL문 실행으로 얻어진 모든 레코드를 담은 ResultSet 객체생성
        rs=pstmt.executeQuery();
        
        while(rs.next()){
            String id= rs.getString("id"); //(id)컬럼명 대신 숫자 1,2,3,4 등으로 사용가능 / 컬럼명 사용을추천
            String passwd= rs.getString("passwd");
            String name = rs.getString("name");
            //밀리세컨드까지 뽑을경우 Timestamp사용 ,그렇지 않으면 사용 할 필요없슴
            Timestamp register=rs.getTimestamp("register");
%>
    <tr>
        <td width="100"><%=id%></td>
        <td width="100"><%=passwd%></td>
        <td width="100"><%=name%></td>
        <td width="250"><%=register.toString()%></td>
    </tr>
<%        }
    }catch(Exception e){
        e.printStackTrace();
    }finally{
        //자원정리
        if(rs !=null)  try{rs.close();}catch(SQLException sqle){}
        if(pstmt !=null) try{pstmt.close();}catch(SQLException sqle){}
        if(conn !=null) try{conn.close();}catch(SQLException sqle){}
    }
%>
    </table>
</body>
</html>


updateTestForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>레코드 수정예제</title></head>
<body>
  <h2>member1 테이블의 레코드 수정예제</h2>
  <form method="post" action="updateTest.jsp">
    아이디 : <input type="text" name="id"><p>
    패스워드 : <input type="password" name="passwd"><p>
    변경할 이름:<input type="text" name="name"><p>
    <input type="submit" value="보내기">
  </form>
</body>
</html>

updateTest.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import = "java.sql.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>레코드 수정예제</title>
</head>
<body>
<%
    request.setCharacterEncoding("utf-8");
    
    String id =request.getParameter("id");
    String passwd =request.getParameter("passwd");
    String name =request.getParameter("name");
    
    Connection conn=null;
    PreparedStatement pstmt=null;
    ResultSet rs=null;
    
    try{
        String jdbcUrl="jdbc:oracle:thin:@localhost:1521:orcl";
        String dbId="hr";
        String dbPass="hr";
        
        //JDBC 수행1단계 : JDBC driver 로드
        Class.forName("oracle.jdbc.driver.OracleDriver");
        //JDBC 수행2단계 : Connection 객체 생성
        conn=DriverManager.getConnection(jdbcUrl,dbId,dbPass);
        
        String sql ="select id, passwd from member1 where id= ?";
        //JDBC 수행3단계 : PrepareStatement 객체생성
        pstmt=conn.prepareStatement(sql);
        //JDBC 수행4단계 : SQL문 실행
        //JDBC 수행5단계 : SQL문 실행으로 얻어진 모든 레코드를 담은 ResultSet 객체생성        
        pstmt.setString(1,id);
        rs=pstmt.executeQuery();
        
        
        //레코드를 읽어오는데 
        //re.next =true => 아이디에 맞는 레코드가 있다.
        //re.next =false => 아이디에 맞는 레코드가 없다.
        if(rs.next()){
            String rId=rs.getString("id");
            String rPasswd=rs.getString("passwd");
            //db에서 가져온 아이디 패스워드와  입력한  아이디패스워드가 같은가 조건체크
            if(id.equals(rId) && passwd.equals(rPasswd)){
                sql="update member1 set name=? where id=?";
                pstmt =conn.prepareStatement(sql);
                pstmt.setString(1,name);
                pstmt.setString(2,id);
                pstmt.executeUpdate();
%>
    member1 테이블 레코드를 수정했습니다.
<% 
            }else{
                out.println("패스워드가 틀렸습니다.");
            }
        }else{
            out.println("아이디가 틀렸습니다.");
        }        
    }catch(Exception e){
        e.printStackTrace();
    }finally{
        //자원정리
        if(rs !=null)  try{rs.close();}catch(SQLException sqle){}
        if(pstmt !=null) try{pstmt.close();}catch(SQLException sqle){}
        if(conn !=null) try{conn.close();}catch(SQLException sqle){}
    }
%>
</body>
</html>



deleteTestForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>레코드 삭제예제</title></head>
<body>
  <h2>member1 테이블의 레코드 삭제예제</h2>
  <form method="post" action="deleteTest.jsp">
    아이디 : <input type="text" name="id"><p>
    패스워드 : <input type="password" name="passwd"><p>
    <input type="submit" value="보내기">
  </form>
</body>
</html>

deleteTest.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>레코드 삭제 예제</title>
</head>
<body>

<%
    request.setCharacterEncoding("utf-8");
    
    String id =request.getParameter("id");
    String passwd =request.getParameter("passwd");
    
    Connection conn=null;
    PreparedStatement pstmt=null;
    ResultSet rs=null;
    
    try{
        String jdbcUrl="jdbc:oracle:thin:@localhost:1521:orcl";
        String dbId="hr";
        String dbPass="hr";
        
        //JDBC 수행1단계 : JDBC driver 로드
        Class.forName("oracle.jdbc.driver.OracleDriver");
        //JDBC 수행2단계 : Connection 객체 생성
        conn=DriverManager.getConnection(jdbcUrl,dbId,dbPass);
        
        String sql ="select id, passwd from member1 where id= ?";
        //JDBC 수행3단계 : PrepareStatement 객체생성
        pstmt=conn.prepareStatement(sql);
        //JDBC 수행4단계 : SQL문 실행
        //JDBC 수행5단계 : SQL문 실행으로 얻어진 모든 레코드를 담은 ResultSet 객체생성        
        pstmt.setString(1,id);
        rs=pstmt.executeQuery();
        
        if(rs.next()){
            String rId=rs.getString("id");
            String rPasswd=rs.getString("passwd");
            if(id.equals(rId) && passwd.equals(rPasswd)){
                sql="delete from member1 where id= ? ";
                pstmt=conn.prepareStatement(sql);
                pstmt.setString(1, id);
                pstmt.executeUpdate();

%>
    member1 테이블의 레코드를 삭제했습니다.
<%        
            }else{
                out.println("패스워드가 틀렸습니다.");
            }
        }else{
            out.println("아이디가 틀렸습니다.");
        }        
    }catch(Exception e){
        e.printStackTrace();
    }finally{       
//자원정리
        if(rs !=null)  try{rs.close();}catch(SQLException sqle){}
        if(pstmt !=null) try{pstmt.close();}catch(SQLException sqle){}
        if(conn !=null) try{conn.close();}catch(SQLException sqle){}
    }
%>    
</body>
</html>













교제P332

JDBC 드라이버를 준비해야한다. : JSP 와 DB 의 매개  클래스모음


JDBC API를 통해 표준화작업.


ojdbc14.jar


JDBC 드라이버 파일을 넣을수있는 위치


1. jdk 설치위치 : C:\Program Files\Java\jdk1.7.0_02\jre\lib\ext    




2.톰캣폴더 :  D:\javaWork\apache-tomcat-7.0.12-windows-x86\apache-tomcat-7.0.12\lib




3.프로젝트단위로 사용시 : WEB-INF/lib/ojdbc14.jar





테이블 생성하기
create table member1(
   id varchar2(10) primary key,
   passwd varchar2(10) not NULL,
   name varchar2(20) not NULL,
   register TIMESTAMP not NULL
);







JDBC 프로그래밍의 코딩 스타일


JDBC프로그램의 일반적인 실행 순서는 다음과 같다.

 1. JDBC 드라이버 로딩

 2. 데이터베이스 커넥션 구함

 3. 쿼리 실행을 위한 Statement 객체 생성

 4. 쿼리 실행

 5. 쿼리 실행 결과 사용

 6. Statement 종료

 7. 데이터베이스 커넥션 종료




JSP 에서 DB 접속하기

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DB 연동 테스트</title>
</head>
<body>
<%
    Connection con=null;
    
    try{
        //thin드라이버가 성능이좋음
        String jdbcUrl="jdbc:oracle:thin:@localhost:1521:orcl";
        String dbId="hr";
        String dbPass="hr";
                
        //JDBC 수행 1단계
        //JDBC 드라이버 로드
        //Class.forName : Static한 메소드를이용해서 시스템중
        Class.forName("oracle.jdbc.driver.OracleDriver");
        
        //JDBC 수행2단계
        //Connection 객체 생성
        //db주소와 일반계정의 id, 비밀번호를 명시해서 인증된 상태에서 DB연동
        con=DriverManager.getConnection(jdbcUrl,dbId,dbPass);
        out.println("제대로 연결 되었습니다.");
    }catch(Exception e){
        e.printStackTrace();
    }
%>
</body>
</html>




<Oracle>


Record : 행


Primary Key  :  레코드 식별값 - 레코드에 접속하기 위해서


Index : Primary Key는 생성시 기본적으로 생김



create tabel 테이블명 ( )


insert into 테이블명 value ('칼럼1값','칼럼2값',....)


select [칼럼명1],[칼럼명2] from 테이블명 where 조건1 and 조건2


update 테이블명 set NAME="최범균" where 조건


delete from 테이블명 where 조건


Oracle











Statement (PreparedStatement가 표준 statement는 insert 같은 경우에 오류가있슴 사용하면안됨)



Statement 의 PreparedStatement 차이점 


1. *Statement  : 객체가 생성될때 SQL을 넘기는게 아니라 메소드에서 SQL을 넘겨줌

        //JDBC 수행3단계 : Statement 객체생성

        stmt=conn.createStatement();

        

        //JDBC 수행4단계 : SQL문 실행

        //JDBC 수행5단계 : SQL문 실행으로 얻어진 모든 레코드를 담은 ResultSet 객체생성

        rs=stmt.executeQuery(sql);


    *PreparedStatement : 객체가 생성될때 SQL 문장을 넘겨줌

        //JDBC 수행3단계 : PrepareStatement 객체생성

        pstmt=conn.prepareStatement(sql);

        //JDBC 수행4단계 : SQL문 실행

        //JDBC 수행5단계 : SQL문 실행으로 얻어진 모든 레코드를 담은 ResultSet 객체생성

        rs=pstmt.executeQuery();


2. PreparedStatement  가 속도도 더빠르다.

3. Statement  가 코드는 짧아보인다. 허나 웹서비스 or 속도 면에서 사용하면 안된다. 





PreparedStatement
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>테이블의 레코드를 화면에 표시하는 예제</title>
</head>
<body>
<h2>member1 테이블의 레코드를 화면에 표시하는 예제</h2>
<table width="550" border="1">

<tr>
	<td width="100">아이디</td>
	<td width="100">패스워드</td>
	<td width="100">이름</td>
	<td width="100">가입일자</td>
</tr>
<%
	Connection conn = null;
	PreparedStatement pstmt=null;
	ResultSet rs = null;
	
	try{
		String jdbcUrl ="jdbc:oracle:thin:@localhost:1521:orcl";
		String dbId="hr";
		String dbPass="hr";
		
		//JDBC 수행 1 단계 : jdbc driver 로드
		Class.forName("oracle.jdbc.driver.OracleDriver");
		//JDBC 수행 2단계: Connection 객체 생성
		conn=DriverManager.getConnection(jdbcUrl,dbId,dbPass);
		
		String sql ="select * from member1";
		//JDBC 수행 3단계 : PreparedStatement 객체 생성
		pstmt=conn.prepareStatement(sql);
		//JDBC 수행 4단계 : sql문 실행
		//JDBC 수행 5단계 : sql문의 실행으로 얻어진 레코드를 담는 ResultSet 객체 생성
		//ResultSet은 커서의 개념이 있어서 next()메소드 사용시 데이터가 있는곳까지만 데이터 뽑아냄
		rs=pstmt.executeQuery();
		
		
		while(rs.next()){
			String id = rs.getString("id");
			String passwd = rs.getString("passwd");
			String name = rs.getString("name");
			Timestamp register = rs.getTimestamp("register");
%>
	<tr>
		<td width="100"><%=id %></td>
		<td width="100"><%=passwd %></td>
		<td width="100"><%=name %></td>
		<td width="100"><%=register.toString() %></td>
	</tr>
<%  }
	}catch(Exception e){
		e.printStackTrace();
	}finally{
		if(rs != null)
			try{rs.close();}catch(SQLException sqle){}
		if(pstmt != null)
			try{rs.close();}catch(SQLException sqle){}
		if(conn != null)
			try{rs.close();}catch(SQLException sqle){}
	}
%>
</table>
</body>
</html>
Statement
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>테이블의 레코드를 화면에 표시하는 예제</title>
</head>
<body>
<h2>member1 테이블의 레코드를 화면에 표시하는 예제</h2>
<table width="550" border="1">

<tr>
	<td width="100">아이디</td>
	<td width="100">패스워드</td>
	<td width="100">이름</td>
	<td width="100">가입일자</td>
</tr>
<%
	//PreparedStatement -> Statement 차이점
	Connection conn = null;
	Statement stmt=null;
	//PreparedStatement pstmt=null;
	ResultSet rs = null;
	
	try{
		String jdbcUrl ="jdbc:oracle:thin:@localhost:1521:orcl";
		String dbId="hr";
		String dbPass="hr";
		
		//JDBC 수행 1 단계 : jdbc driver 로드
		Class.forName("oracle.jdbc.driver.OracleDriver");
		//JDBC 수행 2단계: Connection 객체 생성
		conn=DriverManager.getConnection(jdbcUrl,dbId,dbPass);
		
		String sql ="select * from member1";
		//JDBC 수행 3단계 : Statement 객체 생성
		//pstmt=conn.prepareStatement(sql);
		stmt = conn.createStatement();
		
		//JDBC 수행 4단계 : sql문 실행
		//JDBC 수행 5단계 : sql문의 실행으로 얻어진 레코드를 담는 ResultSet 객체 생성
		//ResultSet은 커서의 개념이 있어서 next()메소드 사용시 데이터가 있는곳까지만 데이터 뽑아냄
		//rs=pstmt.executeQuery();
		rs=stmt.executeQuery(sql);
		
		//차이점은 sql문장 실행시킬때 sql을 넘김
		
		while(rs.next()){
			String id = rs.getString("id");
			String passwd = rs.getString("passwd");
			String name = rs.getString("name");
			Timestamp register = rs.getTimestamp("register");
%>
	<tr>
		<td width="100"><%=id %></td>
		<td width="100"><%=passwd %></td>
		<td width="100"><%=name %></td>
		<td width="100"><%=register.toString() %></td>
	</tr>
<%  }
	}catch(Exception e){
		e.printStackTrace();
	}finally{
		if(rs != null)
			try{rs.close();}catch(SQLException sqle){}
		if(stmt != null)
			try{rs.close();}catch(SQLException sqle){}
		if(conn != null)
			try{rs.close();}catch(SQLException sqle){}
	}
%>
</table>
</body>
</html> 

PreparedStatement  가 더 나은 방법이라 함

더 나은 방법이란것을 뒷받침 하기 위한 예제 





INSERT


PreparedStatement

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<%
	request.setCharacterEncoding("utf-8");

	//전송된 데이터 처리
	String id= request.getParameter("id");
	String passwd= request.getParameter("passwd");
	String name= request.getParameter("name");
	//전송되지 않은 데이터를 jsp에서 생성함(날짜/시간)
	Timestamp register= new Timestamp(System.currentTimeMillis());
	
	Connection conn = null;
	PreparedStatement pstmt = null;
	
	try{
		String jdbcUrl ="jdbc:oracle:thin:@localhost:1521:orcl";
		String dbId="hr";
		String dbPass="hr";
		
		//JDBC 수행 1단계 : jdbc driver 로드
		Class.forName("oracle.jdbc.driver.OracleDriver");
		//JDBC 수행 2 단계 : Connection 객체 생성
		conn =DriverManager.getConnection(jdbcUrl,dbId,dbPass);
		
		//sql 수행문 테이블명 뒤에 부분적으로 수정할경우에는 컬럼명을 입력해야됨
		//member1 (id,passwd,name,register) 모든 데이터를 추가할경우는 생략가능
		String sql = "insert into member1 values(?,?,?,?)";
		//JDBC 수행 3단계 : PreparedStatement 객체 생성
		//위에 sql문장을 저장시키고 각물음표에 매칭시키기
		pstmt = conn.prepareStatement(sql);
		pstmt.setString(1,id);
		pstmt.setString(2,passwd);
		pstmt.setString(3,name);
		pstmt.setTimestamp(4,register);
		//JDBC 수행 4단계 : SQL 문 실행
		pstmt.executeUpdate();
	}catch(Exception e){
		e.printStackTrace();
	}finally{
		//자원 정리
		if(pstmt != null)
			try{pstmt.close();}catch(SQLException sqle){}
		if(conn != null)
			try{pstmt.close();}catch(SQLException sqle){}
	}
	
%>


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>레코드 삽입 (추가) 예제</title>
</head>
<body>
member 1 테이블에 새로운 레코드를 삽입(추가) 했습니다.
</body>
</html>

Statement

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<%
	request.setCharacterEncoding("utf-8");

	//전송된 데이터 처리
	String id= request.getParameter("id");
	String passwd= request.getParameter("passwd");
	String name= request.getParameter("name");
	//전송되지 않은 데이터를 jsp에서 생성함(날짜/시간)
	Timestamp register= new Timestamp(System.currentTimeMillis());
	
	Connection conn = null;
	Statement stmt = null;
	
	try{
		String jdbcUrl ="jdbc:oracle:thin:@localhost:1521:orcl";
		String dbId="hr";
		String dbPass="hr";
		
		//JDBC 수행 1단계 : jdbc driver 로드
		Class.forName("oracle.jdbc.driver.OracleDriver");
		//JDBC 수행 2 단계 : Connection 객체 생성
		conn =DriverManager.getConnection(jdbcUrl,dbId,dbPass);
		
		//sql 수행문 테이블명 뒤에 부분적으로 수정할경우에는 컬럼명을 입력해야됨
		//member1 (id,passwd,name,register) 모든 데이터를 추가할경우는 생략가능
		//직접 매칭시킴
		String sql = "insert into member1 values('"+id+"','"+passwd+"','"+name+"',sysdate)";
		//JDBC 수행 3단계 : Statement 객체 생성
		stmt = conn.createStatement();
		//JDBC 수행 4단계 : SQL 문 실행
		stmt.executeUpdate(sql);
	}catch(Exception e){
		e.printStackTrace();
	}finally{
		//자원 정리
		if(stmt != null)
			try{stmt.close();}catch(SQLException sqle){}
		if(conn != null)
			try{stmt.close();}catch(SQLException sqle){}
	}
	
%>


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>레코드 삽입 (추가) 예제</title>
</head>
<body>
member 1 테이블에 새로운 레코드를 삽입(추가) 했습니다.
</body>
</html>

Statement가 코드량이 적은건 사실이지만

기능적인 문제가 있는것도 사실이다 


Statement보단 PreparedStatement를 사용하는것이 낫지 않을까? 










Statement 사용시 ' 사용시 에러가 났음






'' 두개 사용시 '하나만 표시가 됨


 

어느 사용자가 '를 사용하기 위해''를 두번 넣는 수고를 할까?

PreparedStatement 실행






잘들어감...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AJAX Asyncronized Javascript And Xml </title>
<script src="./jquery-1.7.2.min.js"> 		
    </script>
    <script>
		$(document).ready(function(){
			$('button:eq(1)').click(function(){
				$('div').load('jquery14.html');	 
			});
			
			$('button:eq(2)').click(function(){
				$.ajax({url:'jquery13.html' ,
					   dataType:'html', 
					   success:function(data){
						   
						$('div').html(data);		   
				}});
				return false;
			});
			// 전체 페이지가 아니라 일부만 가져오고 싶을 때
			$('button:eq(3)').click(function(){
				$.ajax({url:'jquery13.html' ,
					   dataType:'html', 
					   success:function(data){
						   
						$('div').html($(data).find('table'));		   
				}});
				return false;
			});
		});
	</script>
<script type="text/javascript">
function loadXMLDoc()
{
	
var xmlhttp;  //변수 선언
if (window.XMLHttpRequest)  // 존재한다면 최신 브라우저에서 지원
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
  }
  
xmlhttp.onreadystatechange=function()
  {
	  alert("readyState"+xmlhttp.readyState);
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
		
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
  
xmlhttp.open("GET","http://gusfree.tistory.com",true); 
xmlhttp.send();  
}
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
<button> jquery로 ajax </button>
<button> jquery로 ajax 2</button>
</body>
</html>

chrome에서 구현 되지 않아서 explorer에서 구동~~



'JavaScript > JQuery' 카테고리의 다른 글

jquery - animation 효과  (0) 2012.06.19
jquery 여러가지 method2  (0) 2012.06.18
jquery 여러가지 method  (0) 2012.06.18
jquery - selector  (0) 2012.06.18
jquery - 복습  (0) 2012.06.18
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>제이쿼리 효과 </title>
	<script src="./jquery-1.7.2.min.js"> 		
    </script>
    <script>
		$(document).ready(function(){
			//         < 3   &lt;
			$('button:lt(3)').click(function(){
				$(this).prev().show(1000, function(){
					$(this).addClass('yellow');							   
				});
				// 대상.before(내용) , 대상앞에 내용을 추가해라 
			});		
			$('button:eq(3)').click(function(){
				$('h1')	.hide(500, function(){});						 
			});
			
			$('button:eq(4)').click(function(){
				// 보였다가 숨겼다가 
				$('h1').toggle(1000, function(){}); 
			});
			
			// fast : 200, normal : 400, slow: 600
			$('button:eq(5)').click(function(){				
				$('img').slideUp('normal', function(){}); 
			});
			
			$('button:eq(6)').click(function(){				
				$('img').slideDown('fast', function(){}); 
			});
			
			$('button:eq(7)').click(function(){				
				$('img').slideToggle('slow', function(){}); 
			});
			$('button:eq(8)').click(function(){				
				$('img').fadeIn('normal', function(){}); 
			});
			
			$('button:eq(9)').click(function(){				
				$('img').fadeOut('fast', function(){}); 
			});
			
			$('button:eq(10)').click(function(){				
				$('img').fadeToggle('slow', function(){}); 
			});
			
			$('.opac').change(function(){ 
			   $('img').fadeTo('fast', $(this).val() ,function(){});				   			});
			
			$('#leftButton').click(function(){				
				$('#img1').animate({marginLeft : -200}, 20);	
			});
			
			$('#rightButton').click(function(){
				$('#img1').animate({marginLeft : 0}, 20);		
			});   
		});
	</script>
    <style>
		.yellow{ background-color:#FF9 ;}
		h1{display:none; }
		#box{ position:relative ;  width:200px; height:200px; 
		      overflow:hidden; margin:auto ; 
		      		}
		#images{ width:400px; height:200px; }
		#images img{width:200px; height:200px; }
		#direction{width:360px; margin:auto; } 
		#leftButton{ margin-top:10px ;}
		#rightButton{margin-left:250px; margin-top:-20px;}
	</style>
</head>
<body>
	<h1> 안녕하세요 </h1>
    <button>  첫번째    </button>    
    <h1> 안녕하세요 </h1>
    <button>  첫번째    </button>
    <h1> 안녕하세요 </h1>
    <button>  첫번째  </button>
    <button> 숨기기 </button>
    <button> 보이기/숨기기 toggle버튼 </button>
    <hr />
    <button> slideUp()</button>
    <button> slideDown()</button>
    <button> slideToggle()</button>
    <button> fadeIn()</button>
    <button> fadeOut()</button>
    <button> fadeToggle()</button>
    <input type="range" min="0.0" max="1.0" step="0.1" value="0.5"
    	class="opac"  />
    <br/> 
    
    <div id="box">
        <div id="images">
            <img id="img1" src="http://t1.gstatic.com/images?q=tbn:ANd9GcRPKRRMatgLqpeOnX9OY_1qhaVF-XWqD1SgoQiSNzhA7CMUAr8Q"  />
            <img id="img2" src="http://t3.gstatic.com/images?q=tbn:ANd9GcTbED9npyNj-QWPTSUHMkRJ7-VCki5a9mB20wPVQdygQepldlI0Ww" />
        </div>
    </div>
    <div id="direction">
    	<button id="leftButton"> 왼쪽 </button>
        <button id="rightButton"> 오른쪽</button>
    </div>
    
    
    
</body>    
</html>      










'JavaScript > JQuery' 카테고리의 다른 글

jquery - ajax  (0) 2012.06.19
jquery 여러가지 method2  (0) 2012.06.18
jquery 여러가지 method  (0) 2012.06.18
jquery - selector  (0) 2012.06.18
jquery - 복습  (0) 2012.06.18
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>무제 문서</title>
	<script src="./jquery-1.7.2.min.js"> 		
    </script>
    <script>
		$(document).ready(function(){
			/*$('li').mouseover(function(){
				imgUrl=$(this).text();
				$('img:first').attr('src', imgUrl);
			});*/	
			
			$('li').bind('mouseover', function(){
				imgUrl=$(this).text();
				$('img:first').attr('src', imgUrl);
			});	
			
			
			$('img:first').bind({click : function(event){ 
							//$(this).width($(this).width()+5);
						   $(event.target).width($(this).width()+5);
						   // this==event.target  같다 
						   $('body').append(
							  "event.screenX : " + event.screenX
							 +"event.screenY" + event.screenY
											);
						    
						} , 
						mouseover : function(){
						  $('body').append('이미지에 마우스 올라감');	
						} ,
						mouseout : function(){
						  $('body').append('이미지에서 마우스 빠짐');							
						} ,
						mousemove : function(){
							position="페이지를 기준으로한 x 좌표"
							     +event.clientX +"<br />"
								 +"페이지를 기준으로한 y 좌표"
							     +event.clientY +"<br />"
								 +"event.screenX :" +"<br />"
								 + event.screenX
							     +"event.screenY :" +"<br />"
								 + event.screenY;
							$('div').html(position);
						}
			});
			
			// 딱한번만 실행되는 1회성 이벤트 리스너			
			$('button:first').one('click', function(){													
				alert(' one 메서드 ');									
			});
			
			$('button:eq(1)').bind('click' , function(event){
				alert(' bind 메서드');										  				$(this).unbind();  // bind 된 것 해제 
				//$(event.target).unbind();
			});			
			
			// 번갈아 가면서 function 이 실행됩니다. 
			$('img:eq(1)').toggle(
			function(){ $(this).attr('width',$(this).width()*2)}, 
			function(){ $(this).attr('width',$(this).width()/2)});
			
			//$('img:eq(2)').dblclick();
			$('img:eq(2)').bind('dblclick', function(){
				$(this).attr('width',$(this).width()*1.1);
			});
			
		});
	</script> 
</head>
<body>
	<button> one() : 한번만 작동하는 버튼</button>
    <button> unbind() :  한번만 작동하는 버튼 </button>
	<ol>
    	<li>http://thumb.opencast.naver.net/opencast01/n/a/naver_story/20120615/11424123483130.jpg?type=f10060</li>
        <li>http://static.naver.net/www/u/2012/0427/nmms_185621873.jpg</li>
    <ol>
    <div> </div>
    <img />
    <img src="http://thumb.opencast.naver.net/opencast01/n/a/naver_story/20120615/11424123483130.jpg?type=f10060"/>
    <img src="http://thumb.opencast.naver.net/opencast01/n/a/naver_story/20120615/11424123483130.jpg?type=f10060"/>
</body>
</html>



'JavaScript > JQuery' 카테고리의 다른 글

jquery - ajax  (0) 2012.06.19
jquery - animation 효과  (0) 2012.06.19
jquery 여러가지 method  (0) 2012.06.18
jquery - selector  (0) 2012.06.18
jquery - 복습  (0) 2012.06.18
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>무제 문서</title>
	<script src="./jquery-1.7.2.min.js"> 		
    </script>
    <script>
		$(document).ready(function(){
								   
			$('button:first').click(function(){					   
				var animal=["dog", "cat", "kuma"];
				//  ul의 child로  "<li>  dog </li> "를 붙이자
				
				// android BaseAdapte getView(int index,.. )
				$.each(animal, function(index, value){
					//ul에 접근해서 파라미터 값을 child로 붙여라					
					$('ul:first').append("<li>"+value+"</li>");		
					// 대상을 ul에 child로 붙여라
					$("<li>"+value+"!</li>").appendTo('ul:first');
				});
			});
			
			$('button:eq(1)').click(function(){
				$('ol >li').appendTo('ul');	
				//$('ul').append($('ol>li'));
			});
			
			$('button:eq(2)').click(function(){
				$('ol :last-child').prependTo('ol');	
			});
			
			// after 지정한 대상 뒤에 붙여라
			$('button:eq(3)').click(function(){ 
				$('<b> plus </b>').insertAfter('ol');	
				$('ol').after('<b> plus + </b>');
				$('ol').after('<hr />');
			});
			
			// before 지정한 대상 앞에 붙여라
			$('button:eq(4)').click(function(){ 
				$('<b> plus </b>').insertBefore('ol');	
				$('ol').before('<b> plus + </b>');
				$('ol').before('<hr />');
			});
			
			// wrap  각각 따로 감싸라    
			//     <p>  <b> 글자 </b>   </p>
			$('button:eq(5)').click(function(){ 
				$('span').wrap("<div class='box'></div>");
			});
			
			// wrapAll()  한꺼번에 감싸라    			
			$('button:eq(6)').click(function(){ 
				$('span').wrapAll("<div class='box'></div>");
			});
			// replaceWith() replaceAll()   바꾸기 교체
			$('button:eq(7)').click(function(){ 
				$('li.second').replaceWith("<li> Change </li>");
				$('li#second').replaceWith("<li> Change </li>");
				$("<li> new Change</li>").replaceAll("li:first");
			});
			
			$('button:eq(8)').click(function(){ 
				$('li.second').empty();		// 내용만 지우기		
			});
			
			$('button:eq(9)').click(function(){ 
				$('li:first').remove();		// 그냥 다 삭제		
			});
			
			$('button:eq(10)').click(function(){ 
				img=$('img').clone();
				$('body').append(img);
			});
			
			// 엘리먼트의 가로길이 세로길이 정보 
			$('button:eq(11)').click(function(){ 
				width=$('img').width();
				height=$('img').height();
				result="width :"+width+", height:"+height;
				$('ol').append("<li>"+result+"</li>");
			});
			
			// 응용
			$('img').click(function(event){
				width=$(this).width();
				height=$(this).height();
				$(this).attr('width', width+5);
				$(this).css('width' , width+5+"px");
			});
			
			//응용 2
			$('img').mousemove(function(event){
				offset=$(this).offset();
				left=offset.left;
				top=offset.top;
				$('li:last').after(
					"<li>left: "+left+", top:"+top+"</li>");
			});
			
			//outerWidth(), outerHeight() : 바깥쪽 margin까지 포함해서
			outerWidth=$('div:last').outerWidth(); 
			width=$('div:last').width(); 
			$('div:last').next()
					.text("outerWidth="+outerWidth+", width="+width);
			
			
		});
	</script>
    <style>
		.box{ border:1px solid black; margin:3px; }
	</style>
</head> 
<body>  
	<button>
    	append(), appendTo() 존재하지 않던 것을 만들어서 추가
    </button> 
    <button>
    	append(), appendTo() 문서에 있는 엘리먼트를 다른곳에 추가
    </button> 
    <button>prepend(), prependTo() 첫번째 자식으로 추가</button> 
    <button>after(), afterTo()  </button> 
    <button>before(), beforeTo()</button> 
    <button>wrap() 개별적 복수</button> 
    <button>wrapAll() 전부 1개</button> 
    <button>replaceWith(), replaceAll()</button> 
    <button>empty()</button> 
    <button>remove()</button> 
    <button>clone()</button>
    <button>width(), height() </button>
    <button>width() height() 응용</button>
    <button></button>
    <img src="http://www.androidpub.com/files/member_extra_info/image_mark/234/234.gif" />
	<ol><li> zero </li>
        <li> first </li>
        <li class="second"> second </li>
        <li id="second"> third </li></ol>
    <ul>    	
    </ul>
    <span> 첫번째 </span><span> 두번째 </span><span> 세번째 </span>
    <br/>
    <div style="width:50px; height:50px; margin:10px; padding:10px;
    			background-color:#6F9 ; 
                border:10px solid black;
                " > </div>
    <span></span>
</body>
</html>



'JavaScript > JQuery' 카테고리의 다른 글

jquery - animation 효과  (0) 2012.06.19
jquery 여러가지 method2  (0) 2012.06.18
jquery - selector  (0) 2012.06.18
jquery - 복습  (0) 2012.06.18
jquery - currentClass  (0) 2012.06.15
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>무제 문서</title>
	<script src="./jquery-1.7.2.min.js"> 		
    </script>
     <script>
		$(document).ready(function(){
			$('button:last').click(function(){					   
				// 사용자가 입력한 값을 가져와라					   
				id =$('.id:text').val(); 
				if(id.trim()==""){ alert('id가 없음');} 
				$('div').html(id);	
				
				pw =$('.pw:password').val(); 
				pw2 =$('.pw2:password').val();
				if(pw!=pw2){  alert('비번이 다름'); }
			});			
			
			// id 입력할때 : 키보드를 눌렀다가 떼는 순간 호출
			$('.id:text').keyup(function(){
				$('div').html( $(this).val() );					 
			});			
			
			// filter    div중에서 class=line 인것만 가져와라
			$('button:first').click(function(){
				$('div').filter('.line')
						.css('width','100px'); 
			});
			// filter의 반대 not :  div중에서 class=line 이 아닌것만
			$('button:eq(1)').click(function(){
				$('div').not('.line').css('height', '100px');								 			});
			//slice(시작, 끝) : 2이상 4 미만 
			$('button:eq(2)').click(function(){
				$('div').slice(2,4).css(
					{ backgroundColor:'yellow', margin: '2px'}); 								 			});
			//slice(시작) : 3이상
			$('button:eq(3)').click(function(){
				$('div').slice(3).css(
					{ backgroundColor:'brown', margin: '2px'}); 								 			});
			//children() : 자식 찾기
			$('button:eq(4)').click(function(){   
				$('div').children().addClass("box");
			});
			
			//contents( 내용 탐색 및 바꾸기)
			$('button:eq(5)').click(function(){  
				// div 의 내용을 찾아서 'span'을 지워라			 
				$('div').contents().remove('span');
			});
			
			//next () 다음에 나온 형제 Element 찾기
			$('button:eq(6)').click(function(){ 
				$('div:eq(2)').next().addClass('box');
 			});
			//next () 다음에 나온 class=line 인 형제 Element 찾기
			$('button:eq(7)').click(function(){ 
				$('div:eq(0)').next('.line').addClass('box');
 			});
			//nextAll()  이후의 형제를 모두 찾아라
			$('button:eq(8)').click(function(){ 
				$('div:eq(0)').nextAll().addClass('box');
 			});
			//prev () 이전에 나온 형제 Element 찾기
			$('button:eq(9)').click(function(){ 
				$('div:eq(2)').prev().addClass('box');
 			});
			//prev () 이전에 나온 class=line 인 형제 Element 찾기
			$('button:eq(10)').click(function(){ 
				$('div:eq(4)').prev('.line').addClass('box');
 			});
			//prevAll()  이전의 형제를 모두 찾아라
			$('button:eq(11)').click(function(){ 
				$('div:eq(4)').prevAll().addClass('box');
 			});
			
			var parents = new Array(); //배열 생성
			
			//parents 조상을 모두 찾아라 body, html 까지 찾는다. 
			// 조상 : 0:div, 1:body, 2:html <- this로 참조한다.
			$('button:eq(12)').click(function(){ 
				$('span:first').parents().addClass('box')
					.each(function(index){
						parents[index]=this.tagName;			   
				});		
				//alert(parents);	
				// 마지막 div에 차일드를 추가해라 
				// parents=["DIV", "BODY", "HTML"]; join(붙이기)
				$('div:last').append(parents.join(","));
				
 			});
			//parent 부모를 찾아라 
			$('button:eq(13)').click(function(){ 
				$('span:first').parent().addClass('box');   
 			});
			$('button:eq(14)').click(function(){ 
				$('body').find('.line').addClass('box');   							  				//$('body .line') 와 같다
				//$('line' , 'body') 와 같다. 
				
				$('div').css("font-size","2em")  //em 기본끌꼴크기 =1
					.find('.line').css("font-size","3em");				
			});
			//map() 객체를 만든다. 
			$('button:eq(15)').click(function(){ 
				$('p').append(							  
					$('ul li').map(function(){
						return $(this).text();						 
						}
					).get().join(",")						
				)
			});
			//andSelf();
			$('button:eq(16)').click(function(){ 
				// ul찾고 그 아래의 li를 찾고 box 클래스추가
				// li 3개 + ul에  linebox 클래스 추가 
				
				$('ul').find('li').addClass("box")
					   .andSelf().addClass("linebox");
			});
			
			//end();
			$('button:eq(17)').click(function(){ 
				// ul찾고 그 아래의 li를 찾고 box 클래스추가
				// method chainging
				//  ul에만  linebox 클래스 추가 
				$('ul').find('li').addClass("linebox")
					   .end().addClass("box");
			});
		});  
	</script> 
    <style>
		.linebox{ border:2px solid black; }
		.box{ background-color:#09F; width:70px; height:70px; 
			  margin:2px; 
			  border:2px solid black;
			  } 
		div{ background-color:#69F; width:50px; height:50px; 
			 float:left; margin:1px; }
		br { clear:both; } <!-- clear: 그전의 float 속성 캔슬 -->
	</style>  
</head>
<body>
	<div> </div>
    <div class="line"> </div>
    <div > </div>
    <div class="line">
    	<span>1</span><span>2</span><br />
	</div>
    <div>
    	<span>3</span><span>4</span>
    </div>
    <br/>
    <button> filter() </button>
    <button> not() </button>
    <button> slice(begin, end) </button>
    <button> slice(begin) </button>
    <button> children() </button>
    <button> contents() </button>
  	<button> next() </button>
    <button> next(이름)</button>
    <button> nextAll()</button>
    <button> prev() </button>    
    <button> prev(파라미터) </button>  
    <button> prevAll() </button> 
    <button> parents() </button>  
    <button> parent() </button>
    <button> find() </button>  
    <button> map() </button>
    <button> andSelf() </button>
    <button> end() </button>
    <br/>    
	<input type="text" name="id" size="10" class="id"
    	placeholder="id를 입력하세요" />
    <input type="password" name="pw" size="10" class="pw"
    	placeholder="pw를 입력하세요" />
    <input type="password" name="pw2" size="10" class="pw2"
    	placeholder="pw를 입력하세요" />
    <button > 보내기 </button><br/>
    <ul>
    	<li> 첫번째 </li><li> 두번째 </li><li> 세번째 </li>
    </ul>
    <p>  </p>
    
</body>
</html>







'JavaScript > JQuery' 카테고리의 다른 글

jquery 여러가지 method2  (0) 2012.06.18
jquery 여러가지 method  (0) 2012.06.18
jquery - 복습  (0) 2012.06.18
jquery - currentClass  (0) 2012.06.15
jquery - image toggle  (0) 2012.06.15
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>무제 문서</title>
	<script src="./jquery-1.7.2.min.js"> 		
    </script>
     <script>
		$(document).ready(function(){
			//0. 선택자.메서드(파라미터);
			//   선택자.메서드(선택자.메서드(파라미터););
			
			//1. 선택자 sellector
			$('div')
			$('.a')  //클래스 선택자
			$('#b')  // 아이디
			$('#b i')  //  #b 밑의 i를 모두(
			$('div.a')	 //div면서 class=a 인것								    		$('div > a') //div의 자식 a 만
			$('div + span') //div의 형제 span만
			$('i + a')
			$('div:first') //div중 첫번째 나온것 
			$('div:last') //모든 div 중 마지먹 것
			$('div:first-child') //div의 child 중 첫번째 나온것 
			$('div:last-child') //모든 의 child 중  마지먹 것
			$('div:odd') // 홀수번째 div
			$('div:even') // 짝수번째 div
			$('div:eq(3)') // div중 3번째 것 equal
			$('div:lt(3)') // div중 3번째 미만의 것들
			$('div:gt(3)') // div중 3번째 이상의 것들
			$('div:nth-child(3)') // div중 3번째 자식 
			$('div:nth-child(3n)') // div중 3배수 자식 
			$('div:nth-child(even)') // div중 짝수번 자식 
			$('div:nth-child(odd)') // div중 홀수번 자식 
			$('div:not( nth-child(odd) )') // 반대의 것만
			$('div[name]') // div중 name이라는 attribute가 존재하면
			$('div[name="age"]') // div중 name=age이면
			$('div[name^="age"]') // div중 name=age로 시작
			$('div[name$="age"]') // div중 name=age로 끝나면
			$('div[name*="age"]') // div중 name=age로 포함하면
			$('img').attr('src'); //img의 src속성의  value를 리턴
			$('img').attr('src','A.JPG'); //img의 src속성값 셋팅
			$('img').attr('src','A.JPG') // return html elements
					.attr('class','small'); //img의 src속성값 셋팅
			$('img').attr({src:'A.JPG', class:'small' } );
			$('img').attr('src', function(){ 'A.JPG'} );		
			$('img').removeAttr('src');	 //src 속성을 지워라
			$('img').removeClass('small');	 //class='small'을 지워라
			$('img').addClass(function(){'small'});	 
			$('img').addClass(function(index){'small'});	
			$('img').addClass(function(index,className){'small'});	
			// class='small' 없으면 붙이고,  있으면 지워라 
			$('img').toggleClass(function(index){'small'});	
			//클래스가 있는 확인해서 true/false 
			$('img').hasClass(function(index){'small'});	
			
			// return  <b> <i> 안녕 </i> <b> 진하게 이태릭체로 표현
			$('div').html(); // 태그의 텍스트를 포함한 자식 리턴
			// 결과 : 안녕
			
			// return  '<b> <i> 안녕 </i> <b>'
			$('div').text(); // 태그의 텍스트로 리턴 		
			//결과  <b> <i> 안녕 </i> <b>
			
			//글씨가 커지지않음 <h1> 글자 그대로 표현
			$('div').text(' <h1>안녕하세요</h1>'); 
			// h1이 적용되어서 표현
			$('div').html('<h1>안녕하세요</h1>');
			
			$('button').click(function(){}); //누르기+떼기
			$('button').moveover(function(){});
			$('button').moveleave(function(){});
			$('button').movedown(function(){}); // 마우스 누르기
			$('button').moveup(function(){}); // 마우스 떼기기
			$('button').toggle( 펑션1, 펑션2); //번갈아 가면 실행
			
			선택자.hide();
			선택자.show();
			선택자.hide(1000);
			선택자.show(1000);
			선택자.hide(1000, function(){}); //1초 후에 펑션 실행
			선택자.show(1000, function(){});
        });
		
	</script>
</head>
<body>	
	<button> </button>
    <input type="button" />
	<div> 안녕 </div>
    <div>  <b> <i> 안녕 </i> <b> </div>
	<img /> 
	<div class='a' name="age" size="10"> </div>
    <span class="a"> </span>
    <div id='b' > 
    	<i> b의 아들
        	<a> </a>
         </i>
        <a> </a>
    </div>
</body>
</html>



'JavaScript > JQuery' 카테고리의 다른 글

jquery 여러가지 method  (0) 2012.06.18
jquery - selector  (0) 2012.06.18
jquery - currentClass  (0) 2012.06.15
jquery - image toggle  (0) 2012.06.15
jquery - mouseover, mouseleave  (0) 2012.06.15



남산골한옥마을 / 마을

주소
서울 중구 필동2가 84-1번지
전화
02-2264-4412
설명
전통 가옥의 아름다운 모습 및 전통혼례와 민속놀이등 다양한 행사로 관광객 및 가족단위...
지도보기



오늘 내 두팔은 빨갛다...역시 선크림을 발라야 하나...




참 곡선이란게 매력있다...




타임캡슐......보정하다가 보니 가을 같네.... ㅡㅡ;




한옥한옥한옥한옥한옥한옥한옥한옥!!!!





오늘도 휴일이라 관광객이 많았는데 그나마 없을때~~




왜 굴뚝 앞에다가 삼발을 첬을까? 이유가 뭘까?






사진 5장을 합쳐 파노라마로 만들어봤다...(내사진기는 오래된 기기라 그런 기능이 없다...)






광화문광장 / 도시근린공원

주소
서울 종로구 세종로
전화
02-120
설명
광화문에서 세종로사거리 및 청계광장에 이르는 중앙에 폭 34m, 길이740m의 광장
지도보기





그냥 앞에만 찍고 왔다...오늘 경복궁 투어를 했으면 난 완전 새빨간 사과가 됐을듯....지금도 팔과 얼굴이 훗훗~~






모나리자가 날 처다본다....왜 이상하게 안보일까 눈섭이 없는데 말이야....??





정말 오래간만에 온 삼청동.....많이 달라져 있었다....






원래 폭탄이 아닌걸로 기억하는데.....수영하는 사람이였나?






웃는 여자는 다 이뻐~~~~






격자 스크린을 장착해야 하는건지 비율을 맞게 할려고 했는데......뭐 그런데로 멋스럽다...ㅎㅎㅎ






나도 자리 찜해줘~~~국민학교 때가 생각난다...ㅎㅎㅎ







한 바퀴 돌고 나서.....뭔가 미래소년 코난 느낌을 나게 찍고 싶었는데....왜 자꾸 성당 같냐....ㅡㅡ;








19禁--- 찍으면서 피식 웃음....이거 설치한 작가는 정말 센스가 흘러넘치는거 같다...ㅋㅋㅋ



'解憂所' 카테고리의 다른 글

엑스포는 다음 기회에...ㅡㅡ;  (0) 2012.07.05
검은 대장장이?....  (0) 2012.07.05
많은 일들......  (0) 2012.06.16
화엄사~~~  (2) 2012.05.28
자연으로.....  (1) 2012.05.28


코엑스에서 세미나가 있어서 잠시 휴식을 위해 앞에 있는 봉은사라는 도심 안에 있었던 사찰.....

미륵보살상에서?(아..불교에 관해서도 공부해야하는데....나의 무지여....)뭔가 기도 하시는 어느 할머니 .....

야경을 많이 찍으로 오던데...나중에 다시 한번 와야겠다....




요즘 한강으로 운동을 다닌다....반포 방향 쪽으로만 다녔는데...오늘은 저기 보이는 63빌딩이 보이는 여의도 쪽으로......

6시에 일어나서 갈려고 했는데....일어나서 뒹굴뒹굴 거렸더니..7시에 출발했다...ㅡㅡ;






컨트라스를 너무 강하게 줬나? 뒤에 남산타워가 잘 안보인다....






야 서울 올라올때 기차안에서 항상 보면서 와 크다 그랬는데 오늘가서 보니 그렇게 큰건지 감흥이 없었다...

나의 순수함이 사라진건가......






그나마 이게 화각 때문에 좀 볼만하다....

63빌딩 좌측에 있는 건물은 아파트라니......











오늘 아침에 대략 3시간 걸었다...좀 무리였다.....난 63빌딩이 바로 보이니 얼마 안 걸릴줄 알았는데....이제 어디를 가볼까나...이따 저녁엔 항상 가던 반포 쪽으로 가야겠다...

'解憂所' 카테고리의 다른 글

검은 대장장이?....  (0) 2012.07.05
HOT!!!!summer....  (0) 2012.06.17
화엄사~~~  (2) 2012.05.28
자연으로.....  (1) 2012.05.28
새로운 몸과 마음으로....  (0) 2012.05.21
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
	<style>
		.small{width:50px; height:50px;}
		.border1{border:2px dotted blue; padding:2px;}
		.border2{border:5px solid red; padding:4px;}
	</style>
<script src="./jquery-1.7.2.min.js"> 		
    </script>
    <script>
		$(document).ready(function(){
			$('img').addClass(function(index, currentClass){
				if(currentClass == 'small'){
					$('p').html(index + "번째 것은 border1 적용");
					return 'border1';
				}else{
					return 'border2';
				}								   
			});
		});
	</script>
</head>
	<p></p><div></div>
	<img class="small" src="http://sogangori.cdn2.cafe24.com/icon/black-leopard-icon.png" />
    <img src="http://sogangori.cdn2.cafe24.com/icon/cat-icon.png"  />
    <img src="http://sogangori.cdn2.cafe24.com/icon/frog-icon.png"  />
    
<body>
</body>
</html>



'JavaScript > JQuery' 카테고리의 다른 글

jquery - selector  (0) 2012.06.18
jquery - 복습  (0) 2012.06.18
jquery - image toggle  (0) 2012.06.15
jquery - mouseover, mouseleave  (0) 2012.06.15
jquery - 이미지 출력시 URI 동시 출력  (0) 2012.06.15

+ Recent posts