javascript 기본

Programming/JavaScript, Sencha 2016.02.14 02:08 Posted by 파란크리스마스

1. alert

브라우져의 팝업으로 값을 확인하는 명령어

alert('Hello World !!!!');

2. console.log - 로그값 확인 

브라우져의 개발자모드를 이용해서 콘솔창에서 로그값 확인 가능

console.log('나 로그');

3. 변수

변수 선언

var value1;

변수 대입

value1 = 2;

4. 상수

상수 const 키워드 사용

const const1 = 1'

5. 데이터 타입

  • 숫자형 - 정수형 / 1, 2, 3
  • 숫자형 - 실수형 / 1.23
  • 문자형 - '변수'
  • 블리언 - true / false

6. 배열

출처 : [자바스크립트 완벽 가이드 정리] 배열

배열의 속성

length 속성 : 배열의 개수 반환

배열의 요소 추가

push

unshift

배열의 요소 삭제

pop() 마지막 요소 삭제, 반환값으로 삭제된 값 반환

shift() 첫번째 

배열의 요소 접근

배열의 index는 0 부터 시작

<html>
<head>
</head>
<body>

<script type="text/javascript">
var colors = ["white", "black", "yellow"];

document.write("배열의 개수 = " + colors.length + "<br>");
document.write("배열의 두번째 요수 = " + colors[1] + "<br>");
</script>

</body>
</html>

7. 산술연산자

  • + : 덧셈
  • - : 뺄셈
  • / : 나눗셈
  • * : 곱셈
  • ++ : 1증가
  • -- : 1감소
  • % : 나머지

8. 문자열 연산자

  • + : 문자열 합치기
9. 조건문

출처 : [JavaScript] 조건문과 반복문

if문

var date = new Date();
var hour = date.getHours();
 
if(hour < 11) {
    alert("아침");
}
else if(hour < 15) {
    alert("점심");
}
else {
    alert("저녁");
}

switch문

var input = Number(prompt('숫자를 입력하세요.', '숫자'));
 
switch(input % 2) {
    case 0:
        alert("짝수입니다.");
        break;
    case 1:
        alert("홀수입니다.");
        break;
    default:
        alert("숫자가 아닙니다.");
        break;
}

삼항 연산자

var input = prompt('숫자 입력', '');
var number = Number(input);
 
(number > 0) ? alert('자연수') : alert('자연수아님');

10. 반복문

출처 : [JavaScript] 조건문과 반복문

while 반복문

value = 0;
while(value < 5) {
    alert(value + '번째 반복');
    value++;
}

do while 반복문

var value = 0;
do {
    alert(value + '번째 반복문');
    value++;
} while(value < 5);

for 반복문

var array = ['포도', '사과', '바나나', '망고'];
 
for(var i=0; i<array.length; i++) {
    alert(array[i]);
}

for in 반복문

배열의 요소 만큼 반복

var array = ['포도', '사과', '바나나', '망고'];
 
for(var i in array) {
    alert(array[i]);
}
11. 예외 처리
try {
  addalert("bad call");
} catch(e) {
  alert(e.message);
}

12. 함수

출처 : Javascript : 함수(function) 다시 보기

함수선언식 function declaration

function sum(src1, src2) {
	return src1 + src2;
}

alert( sum(1, 2) ); // 결과 3

익명 함수표현식 anonymous function

var sum = function (src1, src2) {
	return src1 + src2;
}

alert( sum(1, 2) ); // 결과 3

즉시실행함수 IIFF, Immediately Invoked Function Expression

(function() {
    /* 실행코드 */
})();

함수 변수로 전달

// 전달될 함수
var sum = function (src1, src2) {
	return src1 + src2;
}

// 첫번째 인자로 함수가 전달됨
function sum2(function_name, src1, src2, src3 ) {
	var result = 0;
	result = function_name(src1, src2);
	result = function_name(result, src3);
	return result;
}

alert( sum2( sum, 1, 2, 3) ); // 결과 6

13. 구조체

// 구조체 
var user = {
  name : '이순신',
  user_id : 'lee',
  age : 10
}

// (.)점으로 구조체 멤버에 접근
alert(user.name); // 이순신

구조체 내 함수

var user = {
  name : '이순신',
  user_id : 'lee',
  age : 10,
  getName : function() {
  	return this.name;
  },
  setName : function(name) {
  	this.name = name;
  }
}

alert(user.getName());
user.setName('김유신');

alert(user.getName());

구조체 외부에서 함수 추가

var user = {
  name : '이순신',
  user_id : 'lee',
  age : 10
}

user.getAge = function() {
	return this.age;
}

alert(user.getAge());



7. 객체

- 1

- 2

- 3

8. this 키워드

-

9. 내장 객체

출처 : JavaScript - 내장 객체의 종류 - 늑대의 기억 저장소

window : 브라우저 창이 열릴 때 마다 하나씩 만들어지는 객체, 브라우저 창 안에 존재하는 모든 요소의 최상위 객체.

document : 웹 문서마다 하나씩 만들어지는 객체로 <body> 태그에 의해 만들어진다. HTML 문서에 대한 정보를 가지고 있다.

history : 현재 창에서 사용자의 방문 기록을 저장하고 있는 객체

location : 현재 문서에 대한 URL 정보를 가지고 있는 객체

navigator : 현재 사용하는 브라우저에 대한 정보를 가지고 있는 객체.

screen : 현재 사용하는 화면에 대한 정보를 다루는 객체

10. Number 객체

-

11. Math 객체

출처 : Math 개체(JavaScript) - MSDN - Microsoft
JavaScript Math Reference - W3Schools
즐거움을 찾자 Find Fun!! :: JavaScript 수학 객체 Math

Math 주요 메소드

  • abs(x)       x의 절대값
  • ceil(x)       올림
  • max(x,y,z,...,n) 인자 중 max값
  • min(x,y,z,...,n)  인자 중 min값
  • random()       0 과 1 사이의 난수
  • round(x)       반올림

12. Date 객체

출처 : Date - JavaScript | MDN - Mozilla Developer Network
JavaScript Date Reference - W3Schools
Date 개체(JavaScript) - MSDN - Microsoft
JavaScript Date Object - The Computer Technology

Data 객체 생성

var d = new Date(); // 인자가 없는 경우 객체가 생성된 시간
var d = new Date(milliseconds);
var d = new Date(dateString);
var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);

현재 월 확인

var curdate = new Date()
var month = curdate.getMonth()
document.write(month + "
")


저작자 표시
신고

JQuery Tip

Programming/JavaScript, Sencha 2014.02.05 01:34 Posted by 파란크리스마스

출처 : [ JQUERY ] SRC 변경하기
[php] json_encode 함수가 없을때 해결 방법
AJAX 심플 예제~ json
json_encode
Iterate through elements with similar IDs ( wildcard search )

img src 변경

HTML

<img id="imgSrc" src="1.jpg">

JQuery

$("#imgSrc").bind("click", function(){
  $("#imgSrc").attr("src", "2.jpg");
});

속성값 조회

alert($("#img_reverse").attr("src"));

JQuery AJAX - PHP JSON 연동

json_encode.php (옵션 - PHP엔진에서 json_encode 함수가 지원하지 않는 경우)

<?
function json_encode($a=false){ 
	if(is_null($a)) return 'null'; 
	if($a === false) return 'false'; 
	if($a === true) return 'true'; 
	if(is_scalar($a)){ 
		if(is_float($a)) return floatval(str_replace(",", ".", strval($a))); 
		if(is_string($a)){ 
			static $jsonReplaces = array(array("\\", "/", "\n", "\t", "\r", "\b", "\f", '"'), array('\\\\', '\\/', '\\n', '\\t', '\\r', '\\b', '\\f', '\"')); 
			return '"' . str_replace($jsonReplaces[0], $jsonReplaces[1], $a) . '"'; 
		} else return $a; 
	} 
	$isList = true; 
	for($i=0, reset($a); $i<count($a); $i++, next($a)){ 
		if(key($a) !== $i){ 
			$isList = false; 
			break; 
		} 
	} 
	$result = array(); 
	if($isList){ 
		foreach($a as $v) $result[] = json_encode($v); 
		return '[' . join(',', $result) . ']'; 
	} else{ 
		foreach($a as $k => $v) $result[] = json_encode($k).':'.json_encode($v); 
		return '{' . join(',', $result) . '}'; 
	} 
}
?>

get_user_info.php (json 데이타 생성 php 소스)

<?
include "lib/config.php";

if(!function_exists("json_encode")) { 
	include "json_encode.php";
}

$sql="select * from user_info a where a.user_id = '$user_id'";
$voc_row=DBarray($sql);

$arr = array(
  'user_id' => $voc_row[user_id], 
  'name' => iconv("EUC-KR","UTF-8", $voc_row[name]), 
  'tel' => $voc_row[tel], 
  'email' => $voc_row[email]
);

echo json_encode($arr);
?>

JQuery AJAX 호출

function getUserInfo(parma_user_id) {
	$.ajax({
		url: 'get_user_info.php',
		type: 'GET',
		dataType: 'json',
		data: {
			user_id: parma_user_id
		},
		success : function(result){
			$('#user_id_text').html(result.user_id);
			$('#user_name_text').html(result.name);
			$('#user_tel_text').html(result.tel);
			$('#user_email_text').html(result.email);
		},
		error : function(XMLHttpRequest, textStatus, errorThrown) {
			alert('There was an error.');
		}
	});	
}

Dropdown Menu

출처 - Dropdown Menu

		<ol class="lnb" id="documenter_nav">
			<li><a class="current" href="<c:url value='/index.cmx'/>">홈페이지</a></li>
			<li><a href="<c:url value='/info.cmx'/>">소개</a></li>
			<li><a href="#using_retina_graphics">매뉴얼</a></li>
			<li><a href="#creating_galleries">회원가입</a></li>
			<li><a href="#last_words">결제하기</a></li>
			<li><a href="#template_elements">관리자 모드</a>
				<ol class="sub01" style="display:none;">
					<li><a href="#template_elements_columns">사용자 현황</a>
					<li><a href="#template_elements_lists">포인트 사용현황</a>
					<li><a href="#template_elements_on_off_toggle.">세부 설정</a>
				</ol>
			</li>
		</ol>

javascript

<script type="text/javascript">  
$(function(){  
 $("ol.sub").hide();  
 $("ol.lnb li").hover(function(){  
  $("ol:not(:animated)",this).slideDown("fast");  
 },  
 function(){  
  $("ol",this).slideUp("fast");  
 })
});  
</script>

반복문 each

<div class="grid1_wrap" data-last="true" style="position: relative; height: 300px;">
	<div class="grid1"
		style="position: absolute; left: 0px; top: 0px; -webkit-transition: -webkit-transform; transition: -webkit-transform; -webkit-transform: translate3d(0px, 0px, 0px);">
		<div class="grid1_inner" data-template="text/0">
			<ul class="uio_text">

			</ul>
		</div>
		
		<div id="rowDumy" style="display: none">
			<li id="row_user" class="ut_item" style="height: 80px">
				<a href="javascript:void(0);" 
					class="ut_a" data-clk="cont1">
					<span class="user_list_info"></span>
					<span id="user_status" style="color: red; font-weight: bold;"></span>
					<br/><span class="reg_date" style="display: none;">입사일자 : </span>
				</a>
			</li>
		</div>
	</div>
</div>

javascript

function getUserList(user_status) {
	//
	try {
		$.ajax({
			type: 'POST',
			url: '<c:url value="/json.cmx"/>',
			dataType: 'json',
			data: {
				cmd : 'user_data',
				subcmd : 'list',
				dept_id : ${dept_info.id}
			},
			success: function(result)
			{
				$('.grid1_wrap').height(result.data.list.length * 82);
				
				$.each(result.data.list, function(index, data)
				{
					var row = $('#row_user').clone().attr('id','user_id_' + data.id)
					row.find('.ut_a').attr('user_id',data.id).attr('user_name', data.user_name);
					row.find('.ut_a').attr('href', "javascript:goItemList("+data.id+",'"+data.user_name+"');");
					row.appendTo('.uio_text');
					
					row.find('.user_list_info').html(data.user_name);
					if (data.delete_yn == 2) {
						row.find('#user_status').html('퇴사');
					} else if (data.delete_yn == 3) {
						row.find('#user_status').html('출산휴가');
					}
					
					if (data.reg_date!=undefined) {
						var date=new Date(data.reg_date);
						row.find('.reg_date').html('입사일자 : ' + date.format("yyyy년 MM월 dd일 a/p hh시 mm분"));
					}
				});
			},
			error : function(XMLHttpRequest, textStatus, errorThrown) {
				alert('There was an error.');
			}
		});
	} catch(e) {
		alert(e);
	}
}

엘리먼트 each

		$( "li.ut_item" ).each(function( index ) {
			//console.log( index + ": " + $( this ).text() );
			$( this ).find('#btnSaveSurvey').show();
			$( this ).find('#btnSavePhoto').show();
		});

-

신고

QueryTool 실행해서 테이블 목록에서 테이블를 오른쪽 마우스를 선택해서 MyBatis Java Class 생성를 선택한다.

MyBatis Java Class 생성 선택

옵션 설정

MyBatis Java 패키지 경로 설정

게시판 정보 설정

테이블 타이블 : 게시판 이름으로 사용됨
Comment에 반경 버튼 : 테이블 타이틀에 작성한 내용을 선택한 테이블의 주석으로 반영(Database에 반영)
페이지 사이즈 : 게시판 리스트의 한 페이지당 개수
기본폴더 : Web 주소의 prefix

게시판 리스트 설정

View : 리스트에 출력되는 컬럼 선택
Mian : 리스트의 메인(타이틀이나 제목)이 되는 컬럼 선택
Column : 컬럼명
Title : 게시판 저장 화면에서 출력되는 타이블명
Title값 Comment에 반영 : 작성한 주석의 내용을 Database에 반영

게시판 저장 항목 선택

게시판에 저장할 컬럼을 선택한다.

OK 버튼을 선택하면 MyBatis 텝에 MyBastic 관련 Java 클래스와 xml 파일이 생성됨

 

domain 클래스(자동으로 생성된 코드)

package itg.retis.db.domain;

import java.sql.Date;
import java.sql.Timestamp;

import bluexmas.util.DateUtils;
import net.sf.json.JSONObject;

public class CodeType {

  // pk
  private String type_id;
  
  private String type_name;
  private String type_desc;
  private String is_lock;
  private String is_visible;
  
  public void setType_id(String type_id) {
    this.type_id = type_id;
  }
  public String getType_id() {
    return this.type_id;
  }
  public void setType_name(String type_name) {
    this.type_name = type_name;
  }
  public String getType_name() {
    return this.type_name;
  }
  public void setType_desc(String type_desc) {
    this.type_desc = type_desc;
  }
  public String getType_desc() {
    return this.type_desc;
  }
  public void setIs_lock(String is_lock) {
    this.is_lock = is_lock;
  }
  public String getIs_lock() {
    return this.is_lock;
  }
  public void setIs_visible(String is_visible) {
    this.is_visible = is_visible;
  }
  public String getIs_visible() {
    return this.is_visible;
  }
  public JSONObject getJSONObject() {
    JSONObject jobj = new JSONObject();
    jobj.put("type_id", this.type_id);
    jobj.put("type_name", this.type_name);
    jobj.put("type_desc", this.type_desc);
    jobj.put("is_lock", this.is_lock);
    jobj.put("is_visible", this.is_visible);
    return jobj;
  }
}

persistence 클래스(자동으로 생성된 코드)

package itg.retis.db.persistence;

import java.util.List;
import java.util.Map;

import itg.retis.db.domain.CodeType;

public interface CodeTypeMapper {

  public CodeType selectCodeType(Map<STRING, Object> params);

  public void insertCodeType(CodeType codeType);

  public void updateCodeType(CodeType codeType);

  public void deleteCodeType(Map<STRING, Object> params);

  public int getCount();

  public List<CODETYPE> listCodeType(Map<STRING, Integer> map);

}

service 클래스(자동으로 생성된 코드)

package itg.retis.db.service;

import itg.retis.db.domain.CodeType;
import itg.retis.db.persistence.CodeTypeMapper;

import java.util.HashMap;
import java.util.Map;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class CodeTypeService {

  public final static int pagerowcnt = 25;

  @Autowired
  private CodeTypeMapper codeTypeMapper;

  public CodeType selectCodeType(String typeId) {
    Map<String, Object> params = new HashMap<String, Object>();
    params.put("type_id",typeId);
    return codeTypeMapper.selectCodeType(params);
  }

  public void insertCodeType(CodeType codeType) {
    codeTypeMapper.insertCodeType(codeType);
  }

  public void updateCodeType(CodeType codeType) {
    codeTypeMapper.updateCodeType(codeType);
  }

  public void deleteCodeType(String typeId) {
    Map<String, Object> params = new HashMap<String, Object>();
    params.put("type_id",typeId);
    codeTypeMapper.deleteCodeType(params);
  }

  public int getCount() {
  	return codeTypeMapper.getCount();
  }

  public List<CodeType> listCodeType(int page) throws Exception {
  	Map<String, Integer> params = new HashMap<String, Integer>();
    params.put("page", page);
    params.put("pagerowcnt", pagerowcnt);
    return codeTypeMapper.listCodeType(params);
  }

}

MyBatis xml 파일(자동으로 생성된 코드)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="itg.retis.db.persistence.CodeTypeMapper">

  <!-- selectCodeType -->
  <select id="selectCodeType" parameterType="map" resultType="itg.retis.db.domain.CodeType">
    select type_id
           ,type_name
           ,type_desc
           ,is_lock
           ,is_visible
      from code_type
     where type_id = #{type_id}
  </select>

  <!-- updateCodeType -->
  <update id="updateCodeType" parameterType="itg.retis.db.domain.CodeType" statementType="PREPARED">
      update code_type
        <trim prefix="SET" suffixOverrides=",">
          <if test="type_name != null">type_name = #{type_name, jdbcType=VARCHAR} ,</if>
          <if test="type_desc != null">type_desc = #{type_desc, jdbcType=VARCHAR} ,</if>
          <if test="is_lock != null">is_lock = #{is_lock, jdbcType=VARCHAR} ,</if>
          <if test="is_visible != null">is_visible = #{is_visible, jdbcType=VARCHAR} ,</if>
        </trim>
     where type_id = #{type_id}
  </update>

  <!-- insertCodeType -->
  <insert id="insertCodeType" parameterType="itg.retis.db.domain.CodeType" statementType="PREPARED">
      insert into code_type(
        <trim suffixOverrides=",">
          <if test="type_id != null">type_id ,</if>
          <if test="type_name != null">type_name ,</if>
          <if test="type_desc != null">type_desc ,</if>
          <if test="is_lock != null">is_lock ,</if>
          <if test="is_visible != null">is_visible ,</if>
        </trim>
        ) values	(
        <trim suffixOverrides=",">
          <if test="type_id != null">#{type_id, jdbcType=VARCHAR} ,</if>
          <if test="type_name != null">#{type_name, jdbcType=VARCHAR} ,</if>
          <if test="type_desc != null">#{type_desc, jdbcType=VARCHAR} ,</if>
          <if test="is_lock != null">#{is_lock, jdbcType=VARCHAR} ,</if>
          <if test="is_visible != null">#{is_visible, jdbcType=VARCHAR} ,</if>
        </trim>
        )
  </insert>

  <!-- deleteCodeType -->
  <delete id="deleteCodeType" parameterType="map" statementType="PREPARED">
      delete from code_type
     where type_id = #{type_id}
  </delete>

  <!-- getCount -->
  <select id="getCount" resultType="int">
    select count(*)
      from code_type
  </select>

  <!-- listCodeType -->
  <select id="listCodeType" parameterType="map" resultType="itg.retis.db.domain.CodeType">
    select * 
      from ( select t1.*, ceil( rownum / #{pagerowcnt}) as page 
               from (select * 
                       from code_type
                      order by type_id
                    ) t1 
           ) 
     where page = #{page} 
  </select>

</mapper>

JSONData 클래스(자동으로 생성된 코드)

package itg.retis.db.json;

import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

import itg.retis.db.domain.CodeType;
import itg.retis.db.service.CodeTypeService;
import itg.retis.util.BeanUtils;
import bluexmas.util.DateUtils;
import bluexmas.util.DataUtils;

public class JSONCodeType implements JSONData {

  private CodeTypeService service;

  @Override
  public JSONObject getJSON(HttpServletRequest request, HttpServletResponse response) {

    service = (CodeTypeService)BeanUtils.getBean("codeTypeService");

    String subcmd = request.getParameter("subcmd");
    JSONObject jobj_data = null;
    if (subcmd.equals("add")) {
      jobj_data = getAddData(request, response);
    } else if (subcmd.equals("edit")) {
      jobj_data = getEditData(request, response);
    } else if (subcmd.equals("list")) {
      jobj_data = getListData(request, response);
    } else if (subcmd.equals("info")) {
      jobj_data = getInfoData(request, response);
    }
    return jobj_data;
  }

  public JSONObject getAddData(HttpServletRequest request, HttpServletResponse response) {

    CodeType codeType = new CodeType();
    try {
      codeType.setType_id(request.getParameter("type_id"));
      codeType.setType_name(request.getParameter("type_name"));
      codeType.setType_desc(request.getParameter("type_desc"));
      codeType.setIs_lock(request.getParameter("is_lock"));
      codeType.setIs_visible(request.getParameter("is_visible"));
    } catch (Exception e) {
      System.out.println(e.toString());
    }

    String errStr = null;
    try {
      service.insertCodeType(codeType);
    } catch (Exception e) {
      e.printStackTrace();
      errStr = "error !!! " + e.toString(); // e.toString();
    }

    JSONObject jobj_list = new JSONObject();
    jobj_list.put("err", (errStr==null ? "" : errStr));

    JSONObject jobj_data = new JSONObject();
    jobj_data.put("success", (errStr==null ? true : false));
    jobj_data.put("data", jobj_list);

    return jobj_data;
  }

  public JSONObject getEditData(HttpServletRequest request, HttpServletResponse response) {

    CodeType codeType = new CodeType();
    try {
      codeType.setType_id(request.getParameter("type_id"));
      codeType.setType_name(request.getParameter("type_name"));
      codeType.setType_desc(request.getParameter("type_desc"));
      codeType.setIs_lock(request.getParameter("is_lock"));
      codeType.setIs_visible(request.getParameter("is_visible"));
    } catch (Exception e) {
      System.out.println(e.toString());
    }

    String errStr = null;
    try {
      service.updateCodeType(codeType);
    } catch (Exception e) {
      e.printStackTrace();
      errStr = "error !!! " + e.toString(); // e.toString();
    }

    JSONObject jobj_list = new JSONObject();
    jobj_list.put("err", (errStr==null ? "" : errStr));

    JSONObject jobj_data = new JSONObject();
    jobj_data.put("success", (errStr==null ? true : false));
    jobj_data.put("data", jobj_list);

    return jobj_data;
  }

  public JSONObject getListData(HttpServletRequest request, HttpServletResponse response) {

    int pagerowcnt = 20;
    int pageIndex = 1;
    try {
      pageIndex = Integer.parseInt(request.getParameter("pageIndex"));
    } catch (Exception e) {
      System.out.println(e.toString());
    }

    int rowCount = service.getCount();

    if (pageIndex<1) {
      pageIndex = 1;
    }

    JSONArray arrayObj = new JSONArray();

    List<CodeType> dataList = null;
    String errStr = null;
    try {
      dataList = service.listCodeType(pageIndex);
    } catch (Exception e) {
      e.printStackTrace();
      errStr = "조회오류 !!! 데이터베이스 접속정보를 확인해 보세요."; // e.toString();
    }

    if (dataList!=null) {
      for (int i=0; i<dataList.size(); i++) {
        CodeType codetype = dataList.get(i);
        arrayObj.add(codetype.getJSONObject());
      }
    }

    JSONObject jobj_list = new JSONObject();
    jobj_list.put("list", arrayObj);
    jobj_list.put("err", (errStr==null ? "" : errStr));

    JSONObject jobj_data = new JSONObject();
    jobj_data.put("success", (errStr==null ? true : false));
    if (dataList!=null) {
      jobj_data.put("currentPage", pageIndex);
      jobj_data.put("total", rowCount);
      jobj_data.put("pageSize", pagerowcnt);
    }
    jobj_data.put("data", jobj_list);

    return jobj_data;
  }

  // Info
  public JSONObject getInfoData(HttpServletRequest request, HttpServletResponse response) {

    // pk
    String type_id = null;
    try {
        type_id = request.getParameter("type_id");
    } catch (Exception e) {
      System.out.println(e.toString());
    }

    String errStr = null;
    CodeType infoObj = null;
    try {
      infoObj = service.selectCodeType(type_id);
    } catch (Exception e) {
      e.printStackTrace();
      errStr = "조회오류 !!! 데이터베이스 접속정보를 확인해 보세요."; // e.toString();
    }

    JSONObject jobj_list = new JSONObject();
    jobj_list.put("info", infoObj.getJSONObject());
    jobj_list.put("err", (errStr==null ? "" : errStr));

    JSONObject jobj_data = new JSONObject();
    jobj_data.put("success", (errStr==null ? true : false));
    jobj_data.put("data", jobj_list);

    return jobj_data;
  }
}

JSONFactory 클래스에 JSONData 클래스가 반환 되도록 코드 추가
(사용자가 코드 추가)

package itg.retis.db.json;

public class JSONFactory {
	
	public static JSONData getJSONData(String cmd) {
		
		System.out.println("JSONFactory = " + cmd);

		if (cmd.equals("CodeType")) {   // 1 <-- 여기 두줄 추가
			return new JSONCodeType();  // 2
		} else {
			return new JSONSample();	
		}
	}
}

json 서블릿 호출하여 json data가 올바르게 전달되는지 확인

Sencha 텝에서 게시판 JavaScript 확인

code_type_list.js 소스 (자동으로 생성된 코드)

Ext.ns("ns_code_type_list");

ns_code_type_list.init = function(){

    var dataList;
    var dataStore;
    var pagingToolbar;
    var writeToolbar;

    Ext.regModel('dataModel', {
        fields: ['type_id','type_name','type_desc','is_lock','is_visible']
    });

    dataStore = new Ext.data.Store({
        model: 'dataModel',
        jsonData: [ currentPage = 1 ],
        data: [ ]
    });

    dataList = new Ext.List({
        title: 'CodeType목록',
        store: dataStore,
        scroll: false, // <-- 여기 중요
        layout:'fit', // <-- 여기 중요
        blockRefresh:true,
        onItemDisclosure: {
            handler: function(record, btn, index) {
                //alert(record.get('no'));
                ns_code_type_write.init();
                ns_code_type_write.panel.getInfoData(record.get('type_id'));
                main.MainPanel.setActiveItem(ns_code_type_write.panel, "slide");
            }
        },
        itemTpl:'{type_id} / {type_name} / {type_desc} / {is_lock} / {is_visible}'
    });

    function setList(aJsonData) {
        dataStore = new Ext.data.Store({
            model : 'dataModel',
            data : aJsonData.data.list,
            clearOnPageLoad : true,
            jsonData : aJsonData,
            previousPage: function() {
            	this.jsonData.currentPage = this.jsonData.currentPage - 1;
            	ns_code_type_list.panel_list.getList();
            },
            nextPage: function() {
            	this.jsonData.currentPage = this.jsonData.currentPage + 1;
            	ns_code_type_list.panel_list.getList();
            },
            loadPage: function(page) {
            	this.jsonData.currentPage =  page;
            	ns_code_type_list.panel_list.getList();
        	}
        });
        pagingToolbar.store = dataStore;
        pagingToolbar.handleStoreLoadSH(dataStore, true);

        dataList.bindStore(dataStore);

        ns_code_type_list.panel_list.scroller.scrollTo({
            x: 0,
            y: 0
        });
    };

    pagingToolbar = new Ext.ux.touch.PagingToolbar({
        ui: "charcoal",
        store : dataStore
    });

    writeToolbar = new Ext.Toolbar({
    		ui: "charcoal",
        items: [
        	{ xtype: 'spacer' },
          { text: '등록',
            handler:function() {
              ns_code_type_write.init();
           	 main.MainPanel.setActiveItem(ns_code_type_write.panel, "slide");
          	 }
          }
        ]
    });

    //
    dataStore.on('load', pagingToolbar.handleStoreLoad, pagingToolbar);

    ns_code_type_list.panel_list = new Ext.Panel({
        useCurrentLocation: true,
        scroll:'vertical',
        cardSwitchAnimation:"cube",
        getList:function()
        {
            Ext.Ajax.request({
                url: 'json',
                params : {
                    cmd : 'CodeType',
                    subcmd : 'list',

                    pageIndex : dataStore.jsonData.currentPage
                },
                success: function(response, opts) {
                    //console.log(response.responseText);
                    var JsonData = JSON.parse(response.responseText);
                    //console.log(JsonData);
                    if(JsonData.data.err == "") {
                        setList(JsonData);
                    } else {
                        alert(JsonData.data.err);
                    }
                }
            });
        },
        items:
        [{
            xtype: 'fieldset',
            instructions: 'CodeType목록 입니다. ',
            defaults: {
                labelAlign: 'left'
            },
            items: [
            	dataList,
            	pagingToolbar,
            	writeToolbar
            ]
        }]
    });
}

code_type_write.js 소스 (자동으로 생성된 코드)

Ext.ns("ns_code_type_write");

ns_code_type_write.init = function() {

  var m_subcmd = 'add';
  var m_type_id = "";

  ns_code_type_write.panel = new Ext.form.FormPanel({
    scroll : 'vertical',
    standardSubmit : false,
    title : 'Guestbook',
    items : [{
      xtype : 'fieldset',
      id : 'code_type_form',
      title : '코드타입 등록',
      // instructions: 'Please complete the information.',
      defaults : {
        labelAlign : 'left',
        labelWidth : '120'
      },
      items : [
      {
        xtype : 'textfield',
        id : 'type_id',
        label : '타입아이디',
        useClearIcon : true
      }
      , {
        xtype : 'textfield',
        id : 'type_name',
        label : '타입명',
        useClearIcon : true
      }
      , {
        xtype : 'textfield',
        id : 'type_desc',
        label : '설명',
        useClearIcon : true
      }
      , {
        xtype : 'textfield',
        id : 'is_lock',
        label : '잠금여부',
        useClearIcon : true
      }
      , {
        xtype : 'textfield',
        id : 'is_visible',
        label : '보여짐여부',
        useClearIcon : true
      }
            ]
    },
    {
      layout : {
        type : 'hbox',
        pack : 'center'
      },
      flex : 2,
      style : 'margin: .5em;',
      items : [ {
        xtype : 'button',
        ui : 'decline-round',
        id : 'btnAdd',
        name : 'btnAdd',
        handler : function() {
          Ext.Ajax.request({
            url: 'json',
            params : {
              cmd : 'CodeType',
              subcmd : m_subcmd,

              type_id : Ext.getCmp("type_id").getValue(),
              type_name : Ext.getCmp("type_name").getValue(),
              type_desc : Ext.getCmp("type_desc").getValue(),
              is_lock : Ext.getCmp("is_lock").getValue(),
              is_visible : Ext.getCmp("is_visible").getValue(),
            },
            success : function(response, opts) {
              //console.log(Ext.getCmp("login.user_id"));
              //console.log(response.responseText + Ext.getCmp("login.user_id").value);
              var JsonData = JSON.parse(response.responseText);
              console.log(JsonData);
              if (JsonData.data.err == "") {
                if (JsonData.data.result == "N") {
                  alert(JsonData.data.err);
                } else {
                  alert('등록이 완료 되었습니다.');
                  ns_code_type_list.panel_list.getList();
                  main.MainPanel.setActiveItem(ns_code_type_list.panel_list, "slide");
                }
              } else {
                alert(JsonData.data.err);
              }
            }
          });
        },
        text : '작성완료'
      } ]
    }],

    getInfoData : function(aTYPE_ID) {
      Ext.getCmp("code_type_form").setTitle('코드타입 수정');
      Ext.getCmp("btnAdd").setText('정보수정');
      m_subcmd = "edit";
      // alert('no = ' + ano);
      m_TYPE_ID = aTYPE_ID;
      Ext.Ajax.request({
        url: 'json',
        params : {
          cmd : 'CodeType'
          ,subcmd : 'info'
          ,type_id : aTYPE_ID
        },
        success : function(response, opts) {
          //console.log(response.responseText);
          var JsonData = JSON.parse(response.responseText);
          //console.log(JsonData);
          if (JsonData.data.err == "") {
            Ext.getCmp("type_id").setValue(JsonData.data.info.type_id);
            Ext.getCmp("type_name").setValue(JsonData.data.info.type_name);
            Ext.getCmp("type_desc").setValue(JsonData.data.info.type_desc);
            Ext.getCmp("is_lock").setValue(JsonData.data.info.is_lock);
            Ext.getCmp("is_visible").setValue(JsonData.data.info.is_visible);
          } else {
            alert(JsonData.data.err);
          }
        }
      });
    }
  });
}

확인 - 리스트

 

확인 - 저장

확인 - 조회 및 수정

마무리  

이 툴을 만들 당시 Sencha 2가 나왔기 때문에 현재 버전은 Sencha 1 버전으로만 생성이 되네요.
시간이 된다면 Sencha2 지원과 json 데이터 호출 ajax 부분도 php로 구현하고 하고 싶네요.

php json 호출 템플릿을 제공 하실분이 있으면 언제든지 연락주세요.

신고

JavaScript - Form Object 접근과 제어

Programming/JavaScript, Sencha 2009.05.13 10:57 Posted by 파란크리스마스
출처 : http://igniter.egloos.com/7306760

//
document.forms["form1"].elements["userid"]; 

// 
var obj = document.getElementById("userid");

//
var frm = document.forms["form1"];
for ( i=0; i < frm.length; i++){ 
  var type = "element type : " + frm[i].type + "\n\n";
  var name = "element name : " + frm[i].name + "\n\n"; 
  var value = "element value : " + frm[i].value + "\n\n"; 

신고

JavaScript - 주민번호 체크

Programming/JavaScript, Sencha 2009.04.11 18:52 Posted by 파란크리스마스

출처 : http://blog.naver.com/mini0076/130003885121
http://cafe.chosun.com/club.menu.bbs.read.screen?page_num=1&p_club_id=itmania&p_menu_id=9&message_id=488185

1. 정보 입력시 자동으로 입력폼 이동하기

<html>
<head>
<script language="javascript">
<!--
function check()
{
  var str = document.jumin.jumin1.value.length;
  if(str == 6)
     document.jumin.jumin2.focus();
}
-->
</script>
</head>

<body>
<form name="jumin">
<h2>주민등록 입력</h2>
<input type="text" name="jumin1" size="6" Maxlength="6" OnKeyPress="check();" class="inputtext"> -
<input type="text" name="jumin2" size="7" Maxlength="7" class="inputtext">
</body>
</html>

2. Button을 이용하여 웹페이지 이동

<script language="javascript">
<!--
function popup_new(is_insert, pid)
{
 var str;
 str="master_editing_pop_set.jsp?is_insert="+is_insert+"&pid=" +pid ;
 document.location.href = str;
 //window.open(str,'팝업설정','width=800,height=480 scrollbars=1');
}
-->
</script>
 
       <tr>
        <td height="40" align="center"><label>
          <input type="button" onclick="popup_new('Y', '');" value="팝업설정" />
        </label></td>
      </tr>




- end -

신고


 

티스토리 툴바