'03.HTML 4.X, HTML5, XML.../HTML/Css/Script'에 해당되는 글 196건

  1. 2010.02.19 Deleting table rows
  2. 2010.02.19 Specify frames of a table
  3. 2010.02.19 JavaScript Button action event
  4. 2010.02.19 Disable a Button
  5. 2010.02.04 ie8 확인 스크립트
  6. 2010.01.25 모든 브라우저 버전별 확인 스크립트 2
  7. 2010.01.25 IE8 확인하는 스크립트 : 익스플러 버전체크
  8. 2010.01.22 alert 대신 사용하면 좋은 라이브러리
  9. 2010.01.07 script 문제 1
  10. 2010.01.05 Array.prototype 에 max 값 정의 예제
  11. 2010.01.05 한글도 바이트단위로 처리하기
  12. 2010.01.04 javascript OS 버전 체크
  13. 2009.12.21 간단한 JavaScriptMethodOverloading
  14. 2009.12.21 내가 Prototype에서 jQuery로 옮긴 이유
  15. 2009.11.26 html 소스 암호화
  16. 2009.11.26 롤링 스크립트
  17. 2009.11.24 JavaScriptMVC
  18. 2009.11.24 google Closure Compiler (Labs)
  19. 2009.11.10 iis 405 erroe 나올때 url 을 post 방식으로 넘겨서 인식 못할때
  20. 2009.11.10 화면한줄에 나오게 하기. iframe 적용시
  21. 2009.11.06 google api 를 이용한 rss 서비스
  22. 2009.10.30 html 특수문자
  23. 2009.10.29 마우스 오버시 색상변경
  24. 2009.10.26 IE 전용 스크립트...EE,IE 둘다 가능하도록 변경 javascript 1
  25. 2009.10.20 ID저장 자바스크립트, id save javascript
  26. 2009.10.20 아이디 저장 자바스크립트
  27. 2009.10.07 배경이미지 반복 안되게 style="background-repeat:no-repeat;
  28. 2009.10.07 div 가운데 정렬되는 문제
  29. 2009.10.07 ie6에서 프레임 사용시 가로스크롤이 생기는 문제
  30. 2009.09.28 gfeedfetcher.js
반응형
<html>
<head>
<script type="text/javascript">
function deleteRow(i){
    document.getElementById('myTable').deleteRow(i)
}
</script>
</head>

<body>
<table id="myTable" border="1">
<tr>
  <td>Row 1</td>
  <td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)"></td>
</tr>
<tr>
  <td>Row 2</td>
  <td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)"></td>
</tr>
<tr>
  <td>Row 3</td>
  <td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)"></td>
</tr>
</table>
</body>

</html>
Posted by 1010
반응형
<html>
<head>
<script type="text/javascript">
function aboveFrames(){
    document.getElementById('myTable').frame="above"
}
function belowFrames(){
    document.getElementById('myTable').frame="below"
}
</script>
</head>

<body>
<table id="myTable">
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
    <tr>
        <td>c</td>
        <td>d</td>
    </tr>
</table>
<form>
    <input type="button" onclick="aboveFrames()" value="Show above frames">
    <input type="button" onclick="belowFrames()" value="Show below frames">
</form>
</body>
</html>

Posted by 1010
반응형
<HTML>
<HEAD>
<TITLE>Using Properties</TITLE></HEAD>
<BODY>
<H1>Using Properties</H1>
<FORM>
<P><INPUT TYPE="BUTTON" NAME="red" VALUE="Red"
 ONCLICK='document.bgColor="red"'></P>
<P><INPUT TYPE="BUTTON" NAME="white" VALUE="White"
 ONCLICK='document.bgColor="white"'></P>
<P><INPUT TYPE="BUTTON" NAME="blue" VALUE="Blue"
 ONCLICK='document.bgColor="blue"'></P>
</FORM>
</BODY>
</HTML>

Posted by 1010
반응형
<html>
<body>
<button onclick="this.disabled='true'; alert(this.isDisabled);">Disable Me</button>
</body>
</html>

   
Posted by 1010
반응형
//ie8 
var isOldIE = false;
if(Prototype.Browser.IE) {
  if(parseFloat(navigator.appVersion.split("MSIE")[1].split(";")[0].split(" ").join("")) <= 7) {
    isOldIE = true;
  }
}
Posted by 1010
반응형

<%@ page language="java" contentType="text/html; charset=EUC-KR"
 pageEncoding="EUC-KR"%>
<!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=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">

 // InternetVersion
 function getInternetVersion(ver) {
  var rv = -1; // Return value assumes failure.     
  var ua = navigator.userAgent; 
  var re = null;
  if(ver == "MSIE"){
   re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
  }else{
   re = new RegExp(ver+"/([0-9]{1,}[\.0-9]{0,})");
  }
  if (re.exec(ua) != null){
   rv = parseFloat(RegExp.$1);
  }
  return rv; 
 }
 
 //브라우저 종류 및 버전확인 
 function browserCheck(){
  var ver = 0; // 브라우저  버전정보
  if(navigator.appName.charAt(0) == "N"){
   if(navigator.userAgent.indexOf("Chrome") != -1){
    ver = getInternetVersion("Chrome");
    alert("Chrome"+ver+"입니다.");
   }else if(navigator.userAgent.indexOf("Firefox") != -1){
    ver = getInternetVersion("Firefox");
    alert("Firefox"+ver+"입니다.");
   }else if(navigator.userAgent.indexOf("Safari") != -1){
    ver = getInternetVersion("Safari");
    alert("Safari"+ver+"입니다.");
   }
  }else if(navigator.appName.charAt(0) == "M"){
   ver = getInternetVersion("MSIE");
   alert("MSIE"+ver+"입니다.");
  }
  }
</script>  
</head>
<body>  
 <input type="button" value="브라우저판별" onclick="browserCheck();">  
</body>
</html>

Posted by 1010
반응형
<%@ page language="java" contentType="text/html; charset=EUC-KR"
 pageEncoding="EUC-KR"%>
<!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=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
 function getInternetExplorerVersion() {
  var rv = -1; // Return value assumes failure.  
 
  
  if (navigator.appName == 'Microsoft Internet Explorer') {
   var ua = navigator.userAgent;
   alert(ua); 
   var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
   if (re.exec(ua) != null)
    rv = parseFloat(RegExp.$1);
  }
  return rv;
 }
 function checkVersion() {
  var msg = "You're not using Windows Internet Explorer.";
  var ver = getInternetExplorerVersion();
  if (ver > -1) {
   if (ver >= 8.0)
    msg = "You're using a recent copy of Windows Internet Explorer.";
   else
    msg = "You should upgrade your copy of Windows Internet Explorer.";
  }
  alert(msg);
 }
 function IsIE8Browser() {
  var rv = -1;
  var ua = navigator.userAgent;
  var re = new RegExp("Trident\/([0-9]{1,}[\.0-9]{0,})");
  if (re.exec(ua) != null) {
   rv = parseFloat(RegExp.$1);
  }
  alert(ua);
  alert(re);
  alert("re.exec(ua) : "+re.exec(ua));
  alert(rv);
  return (rv == 4);
 }
</script>
</head>
<body>
<input type="button" value="브라우저테스트1" onclick="checkVersion();">
<input type="button" value="브라우저테스트2" onclick="IsIE8Browser();">
</body>
</html>
Posted by 1010
반응형
http://www.gscottolson.com/blackbirdjs/



Demos

Output all message types

log.debug( 'this is a debug message' );
log.info( 'this is an info message' );
log.warn( 'this is a warning message' );
log.error( 'this is an error message' );

Click the block to execute the code

Generate test string

log.profile( 'generate test string' );

var testContent = '';
for ( var i = 0; i < 3000; i++ ) {
  testContent += '-';
}

log.profile( 'generate test string' );

Click the block to execute the code

Setup

Adding Blackbird to your page

  1. Download the files and place them on your server or in a local directory on your computer.
  2. Include blackbird.js in your page.
  3. Inlcude blackbird.css in your page.

Your HTML source should look similar to the following code:

<html>
  <head>
    <script type="text/javascript" src="/PATH/TO/blackbird.js"></script>
    <link type="text/css" rel="Stylesheet" href="/PATH/TO/blackbird.css" />
    ...
  </head>
  ...

Browser compatibility

Blackbird is has been smoke-tested on the following browsers:

  • Internet Explorer 6+
  • Firefox 2+
  • Safari 2+
  • Opera 9.5
Usage

Public API

log.toggle()
Hide/show Blackbird
log.move()
Move Blackbird to next fixed positions: top-left, top-right, bottom-left, bottom-right
log.resize()
Expand/contract Blackbird
log.clear()
Clear all contents of Blackbird
log.debug( message )
Add a debug message to Blackbird
message: the string content of the debug message
log.info( message )
Add an info message to Blackbird
message: the string content of the info message
log.warn( message )
Add a warning message to Blackbird
message: the string content of the warn message
log.error( message )
Add an error message to Blackbird
message: the string content of the warn message
log.profile( label )
Start/end a time profiler for Blackbird. If a profiler named string does not exist, create a new profiler. Otherwise, stop the profiler string and display the time elapsed (in ms).
label: the string identifying a specific profile timer

Keyboard controls

Hide/show
F2
Move
Shift + F2
Clear
Alt + Shift + F2

Interface controls

Pressing the Alt key while clicking any message filter control will only show messages of that type. For example, Alt + click debug control to show only debug messages.

Bookmarklets

Drag the following links to your bookmarks toolbar for quick access to Blackbird commands:

Customization

Changing the namespace

The default configuration attaches the public API for Blackbird to the global variable log. It is possible to have conflicts with existing variable declarations, and it is possible to redefine the global variable log in other blocks of JavaScript. If you want to define a different variable for Blackbird, such as blackbird, replace the assignment for NAMESPACE with any other string.

var NAMESPACE = 'log';

can be replaced with:

var NAMESPACE = 'blackbird';

or:

var NAMESPACE = 'myCustomLog';

The global API will be affected by this change. If you choose to replace log with myCustomLog, then log.debug will become myCustomLog.debug.

Capture & cancel logging statements

If you're shipping code with logging statements, you might want to capture and cancel commands intended for Blackbird. The following code will do this:

var log = {
  toggle: function() {},
  move: function() {},
  resize: function() {},
  clear: function() {},
  debug: function() {},
  info: function() {},
  warn: function() {},
  error: function() {},
  profile: function() {}
};
About

Credits

The code (blackbird.js, blackbird.css) and image assets (blackbird_panel.png, blackbird_icons.png) were created by G. Scott Olson.

The concept for Blackbird was sparked by JavaScript Logging, an article by David F. Miller. The first iteration of this project, named jsLogger, was developed for internal use at Orbitz. In the fall of 2007, jsLogger was rewritten from the ground up, given a facelift, and named project Blackbird.

Contributing to the Blackbird Project

Blackbird is an open source project. If you're intereted in contributing, you can start by checking out the project page on Google Code.

Posted by 1010
반응형

-- 문제


<script type="text/javascript">
 function tt(){
  var external_links = document.getElementById('external_links');
  var links = external_links.getElementsByTagName('a');
  for (var i=0;i < links.length;i++) {
      var link = links.item(i);
      link.onclick = function() {
          return confirm('You are going to visit: ' + this.href);
      };
  }
 } 
</script>

<div id="external_links">
 <a href="http://www.naver.com">link</a>
</div>  
<input type="button" name="dddd" onclick="tt();"/>

---
실행조건(1) : 링크를 클릭한다.
실행조건(2) : 버튼을 클릭한 후, 링크를 클릭한다.

결과가 다른 이유는...?

-----------------------------
ex)
window.onload = function() {
  tt();
 };

Posted by 1010
반응형
<script type="text/javascript">
 function array_max( )  
 {    
  var i, max = this[0];    
  for (i = 1; i < this.length; i++)    
  {     
   if (max < this[i])      
   max = this[i];    
  }        
  return max;   
 }   
 Array.prototype.max = array_max;   
 var x = new Array(1, 2, 3, 4, 5, 6);   
 var y = x.max( );
 function tt(){
  alert("y : "+y);
 } 
</script>
<input type="button" onclick="tt();">
Posted by 1010
반응형


출처 : http://jsguide.net/ver2/examples/index.php?mode=view&category=5&qstr=&uid=197&page=1


자바스크립트에서는 2바이트 문자를 한글자로 처리하기 때문에 바이트 단위로 잘라야 하거나 검사할때 문제가 많습니다.
그래서 바이트 단위로 길이를 검사하고 자르는 메소드를 추가해봤습니다.

서핑중에 sms 보내는 폼이 나오면... 혹시나하고 소스를 열어보곤 하는데.. ㅇ_ㅇ(힉..)
80바이트가 넘는지 검사하는걸 상당히 복잡하게 코딩해논게 보이더군요..
코드 나갑니다


<script>
 /**
 * string String::cut(int len)
 * 글자를 앞에서부터 원하는 바이트만큼 잘라 리턴합니다.
 * 한글의 경우 2바이트로 계산하며, 글자 중간에서 잘리지 않습니다.
 */
 String.prototype.cut = function(len) {
  var str = this;
  var l = 0;
  for (var i=0; i<str.length; i++) {
   l += (str.charCodeAt(i) > 128) ? 2 : 1;
   if (l > len) return str.substring(0,i) + "...";
  }
  return str;
 }

 /**
 * bool String::bytes(void)
 * 해당스트링의 바이트단위 길이를 리턴합니다. (기존의 length 속성은 2바이트 문자를 한글자로 간주합니다)
 */
 String.prototype.bytes = function() {
  var str = this;
  var l = 0;
  for (var i=0; i<str.length; i++) l += (str.charCodeAt(i) > 128) ? 2 : 1;
  return l;
 }

 aaa = "동a해b물c과 백두산이";
 alert(aaa.cut(15));

 // 또는

 bbb = "너무긴내용너무긴내용너무긴내용";

 alert("length: " + bbb.length + "\nbytes(): " + bbb.bytes());

 //응용

 if (bbb.bytes() > 20) {
  alert("내용이 너무 깁니다");
 } else {
  // 처리
 }
/* 여기서부터는 실행되지는 않습니다 ---

 // 다시응용 (sms폼에서 80바이트 넘는지 처리할경우)

 var sms = document.forms['폼이름'].elements['입력창'];
 if (sms.value.bytes() > 80) {
  alert('80바이트까지만 전송할 수 있습니다');
  sms.value = sms.value.cut(80);
 }
여기까지 실행되지 않습니다 */
</script>

Posted by 1010
반응형

<script type="text/javascript">
<!--
 function ttt(){
  var request_os = window.navigator.appVersion;
   var os_array = request_os.split(";");
  //alert("os_array : "+os_array[2]);
  //alert("request_os : "+request_os);
  //alert(document.cookie);
  switch(os_array[2])
 {
    case " Windows NT 6.1" :
        os_version = "Windows7";
        break;
    case " Windows NT 6.0" :
        os_version = "WindowsVista";
        break;
    case " Windows NT 5.1" :
        os_version = "WindowsXP";
        break;
    case " Windows NT 5.0" :
        os_version = "Windows2000";
        break;
    case " Windows NT 4.0" :
        os_version = "WindowsNT";
        break;
    case " Windows 98" :
        os_version = "Windows98";
        break;
    case " Windows 95" :
        os_version = "Windows95";
        break;
 }
 alert("os_version : "+os_version);
 
 }
-->
</script>

<input type="button" onclick="ttt();">

Posted by 1010
반응형
// addMethod - By John Resig (MIT Licensed)
function addMethod(object, name, fn){
    var old = object[name];
    object[name] = function(){
        if (fn.length == arguments.length)
            return fn.apply(this, arguments);
        else
            if (typeof old == 'function')
                return old.apply(this, arguments);
    };
}

// Now setup the methods
function Users(){
    addMethod(this, "find", function(){
        // Find all users...
    });
    addMethod(this, "find", function(name){
        // Find a user by name
    });
    addMethod(this, "find", function(first, last){
        // Find a user by first and last name
    });
}

// Now use the methods
var users = new Users();
users.find(); // Finds all
users.find("John"); // Finds users by name
users.find("John", "Resig"); // Finds users by first and last name
users.find("John", "E", "Resig"); // Does nothing



출처 : http://openframework.or.kr/Wiki.jsp?page=JavaScriptMethodOverloading
Posted by 1010
반응형
이 글은 번역한 것입니다. 원문은 여기에서 확인하실 수 있습니다. 겸손한 자바스크립트를 구현하기엔 jQuery가 가장 적절하고 바람직하다는 생각에 옮겨봅니다. 저도 Quark씨처럼 당장의 편리함을 따른 것보다 jQuery의 철학을 따르는 것이 더 바람직하다고 생각합니다. 항상 디커플링을 지향하는 것이 생산성 문제를 개선하고 미래에 적응하는 것을 가능케 하기 때문입니다.

 오역된 부분이 있을 지도 모르겠습니다.-_-;; 교과서 영어가 아니라-_-;; 나름대로 의역을 하긴 했는데 어렵네요.

----여기부터는 번역입니다.

 jQuery는 겸손한(unobtrusive) 자바스크립트를 위한 자바스크립트 라이브러리다. jQuery는 태생적으로 Behavior driven development 방법론을 지향하고 CSS 셀렉터를 사용하여 HTML 문서를 훓는 방법(traversing)을 방법에 기반한다. 반면에 Prototype은 태생적으로 Class driven development를 지향하고 쉽게 자바스크립트 개발할 수 있도록 해준다. Prototype 라이브러리는 Ruby on Rails에서 아주 잘 지원되고 많은 헬퍼 함수들을 가지고 있다.

 세달 전에 마음을 jQuery로 굳히기까지 나는 항상 Prototype 라이브러리를 사용해왔다. jQuery은 나를 매우 고무시겼다. 여기에 그 이유가 있다.

  1. BDD(Behavior driven development)
  jQuery를 사용하면 CSS로 HTML 엘리먼트의 스타일을 정의하는 것 처럼 HTML 엘리먼트의 행동들을 분리하여 정의할 수 있다. 클릭했을 때 경고창을 띄우는 예제를 보자.

1.$(element).click(function(){
2.  alert("warning");
3.});
  이제 복잡한 예제를 살펴보자. speciallinks 클래스들의 모든 엘리먼트에 다음과 같은 행위를 집어넣자.
    1. href를 "javascript:void(0);"로 변경하고
    2. 클릭시 로그를 남기고
    3. onhover시(mouse over시) 배경색을 변경한다.

1.$("div.speciallinks").attr("href","javascript:void(0)")
2.  .click(function() {console.log("div.speciallinks clicked");})
3.  .hover(function(){$(this).addClass("hovered");},
4.       function(){$(this).removeClass("hovered");});

  2. MVC + J
    MVC 프레임웍은 웹 개발 환경을 Model-View-Controller로 나누었다. MVC 프레임워크에서 뷰는 HTML, CSS, Javascript의 부분으로 나누어지고 GUI 개발은 이 세부분이 하나로 결합하여 완성된다. 게다가 Ruby on Rails에서의 Prototype 라이브러리는 HTML과 JavaScript도 함께 합쳐버린다(meshup). 뷰를 개발하면서 JavaScript를 분리하는 BDD 방법론을 따르려 한다면 jQuery가 매우 적절하다. 나는 Ajax에서 MVC + J가 매우 강력하다는 것을 깨닭았다.

    나는 JQuery를 사용하여 나의 HTML 파일을 매우 깨끗하게 만들었고 모든 JavaScript 코드를 .js에 넣음으로써 HTML 엘리먼트의 행위를 모두 .js 파일에 정의하였다.

  3. 액션 체인(Chaining of actions)
    액션 체인은 DRY 원칙을 따를 뿐만 아니라 JavaScript 코드의 가독성을 증가시킨다. 만약 엘리먼트에 오퍼레이션들을 삽입하려면 다음과 같이 할 수 있다.

1.$("div.message").show()
2.  .append("<P>Action has been executed successfully")
3.  .addClass("flash");
4.// 각 함수는 라인으로 구분하여 사용한다.
5.</P>

    이 것은 jQuery의 모든 메소드가 query 객체를 반환하기 때문에 가능하다. 그리고 뒤따르는 메소드들이 선택된 HTML 엘리먼트에 체인 형식으로 적용된다.

   4. CSS 셀렉터 문제(CSS Selector rocks)
      CSS 셀럭터 HTML DOM을 사용하기에 매우 강력한 도구이다. jQuery는 HTML 문서의 엘리먼트를 식별하기 위해 CSS 셀러터를 이용하고 이를 위해 HTML 태그의 id 속성을 관리해야 하는 지루한 작업을 회피하게 해준다. 대부분의 id 속성은 CSS 셀렉터를 올바르게 사용하여 회피할 수 있다. Prototype의 $$ 함수는 CSS 셀렉터를 지원하지만 CSS 셀렉터의 능력을 모두 이끌어내지 못한다. 나는 Prototype에서 id 속성을 사용하는 것이 최선이라는 것을 알게 됐다.

   5. 엘리먼트의 존재 유무를 검사할 필요가 없다.
     프로토타입으로 액션으로 적용하기 전에 항상 엘리먼트가 존재하는지 확인해야 했다. 예를 들어 나는 사용자가 로그인 했을 때만 사용자가 명시한 내용을 보여주고 싶었다. 사용자가 로그인 했다면 렌더링된 페이지에 div{id='user-box'}같은 엘리먼트가 있다는 것을 검사해야 했다. 프로토타입에서는 그렇게 해야 했다.

1.if ($('user-box')!=null) {
2.    // jQuery에서는 이 if 블럭이 필요없다.
3.    $("user-box").style.backgroundColor = "red";
4.}


   6. Aids development process
     jQuery를 사용하면 HTML 코드가 간결해지고 거의 건드릴 필요가 없다. 나의 웹 디자이너는 쉽게 html과 stylesheet를 수정할 수 있고 Prototype 라이브러리를 몰라도 된다.

예제들:
  여기에는 jQuery와 프로토타입의 차이점을 강조하는 몇 가지 예제가 있다(물론, 이 코드가 최상의 코드는 아니다).

Example1:
 이 Tab 예제는 tabs 클래스에 속하는 3 개의 tab이 있고 id는 각각 tabs1, tabs2, tabs3이다(ids=>["tabs1","tabs2","tabs3"]). 사용자가 "show first tab" 링크를 클릭했을 때 #tab1만 보여진다.

 jQuery의 경우

1.$("div.tabs").hide();
2.$("div#tabs1").show();


    
  Prototype의 경우

1.$$("div.tabs").invoke("hide");  // 이거
2.$$("div.tabs").each(function(x){
3.  Element.hide(x);
4.});
5.// 그리고 다음과 같은 코드로 마무리한다.
6.$("tabs1").show();


Example2:
엘리먼트의 CSS를 수정하는 예제

  jQuery의 경우

1.$("#user-box").css("background-color","red")


  Prototype의 경우    

1.var a = $("user-box");
2.a.style.cssText += "background-color:red;";

Remy Sharp의 발표자료에서 다른 예제들도 볼 수 있다. http://ajaxian.com/archives/prototype-and-jquery-a-code-comparison.

Prototype이 좋은 이유
  1. Ajax 요청에서 div의 내용이 부분적으로 변경돼야 할때 JavaScript 행위는  activated/reactivated돼야 한다. jQuery에서는 이를 위한 많은 코드를 만들지 않아도 된다. 하지만 나는 Ajax로 로드된 이 부분을 항상 마음속으로만 새겨야 한다. Prototype에서는 로드된 HTML 엘리먼트들에 관련된 JavaScript 코드가 포함된다.
  2. Ruby on Rails의 Prototype 헬퍼들은 정말 대단하고 JavaScript와 Ajax를 만들때 많은 부분에서 매우 편리하다.
  3. Prototype은 자바스크립에서도 Ruby같은 문법을 사용할 수 있게 해준다. 개발을 쉽고 빠르게 할 수 있도록 배열, 객체 등의 기능을 변경해준다.
  4. jQuery에서는 JavaScrpt 파일이 모두 다운로드되고 DOM 생성된 후에만 엘리먼트의 행위를 사용할 수 있다. 연결이 느릴 때는 기다려야만 하기 때문에 매우 고통스럽다.

결론:
  jQuery와 Prototype은 둘 다 매우 굉장하다. 나는 더 적은 코드로 더 많은 일을 하면서 직관적이고 겸손하게 유지해야 한다는 jQuery의 철학이 큰 차이를 만든다고 생각한다. 그러나 나는 Prototype이 매우 그립다. jquery-rails가 통합되길 기다리고 있다. 결국 이 고지는 점령될 것이다. 나는 사람들이 이 변화를 감지하고 있다는 소식을 들을 때마다 기쁘다.

ps> 이 두 라이브러리를 함께 사용하려면 여기를 보라.


출처 : http://dogfeet.tistory.com/29
Posted by 1010
반응형

html 소스 암호화


Posted by 1010
반응형

<style type="text/css">
*{font-family:돋움,Dotum,AppleGothic,sans-serif;font-size:12px;color:#333;}
body,form,div,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,pre,fieldset,input,blockquote,th,td{margin:0;padding:0;}
ol,ul,dl{list-style:none;}
a{color:#333;text-decoration:none;}
a:hover,a:hover b,a:hover em,a:hover span{color:#06c;text-decoration:underline;}

/*rolling Button*/
div.rollBtn{position:absolute;z-index:3;}
div.rollBtn a.next{background-position:-22px 0px;cursor:hand;}
div.rollBtn a.previous{margin-right:3px;cursor:hand;}
div.rollBtn a span{display:none;}

#bKey{position:relative;margin-top:9px;width:270px;zoom:1;}
#bKey .keyBg{margin:1px 0 0 0;overflow:hidden;height:18px;}
#bKey ul{clear:both;}
#bKey ul li{float:left;height:18px;}
#bKey ul li.x{background:url(http://simg.paran.com/top_v2.2/top/ic_line06.gif) 100% 0 no-repeat;margin:0 7px 0 0;padding:0 7px 0 0;}
#bKey ul li a{font-weight:bold;color:#FB6A31;letter-spacing:-1px;}
#bKey .rollBtn{left:203px;top:0;}
#bKey .rollBtn .up{margin-right:3px;}
</style>
<script language="JavaScript">
function scrolling(objId,sec1,sec2,speed,height){
  this.objId=objId;
  this.sec1=sec1;
  this.sec2=sec2;
  this.speed=speed;
  this.height=height;
  this.h=0;
  this.div=document.getElementById(this.objId);
  this.htmltxt=this.div.innerHTML;
  this.div.innerHTML=this.htmltxt+this.htmltxt;
  this.div.isover=false;
  this.div.onmouseover=function(){this.isover=true;}
  this.div.onmouseout=function(){this.isover=false;}
  var self=this;
  this.div.scrollTop=0;
  window.setTimeout(function(){self.play()},this.sec1);
}
scrolling.prototype={
  play:function(){
    var self=this;
    if(!this.div.isover){
      this.div.scrollTop+=this.speed;
      if(this.div.scrollTop>this.div.scrollHeight/2){
        this.div.scrollTop=0;
      }else{
        this.h+=this.speed;
        if(this.h>=this.height){
          if(this.h>this.height|| this.div.scrollTop%this.height !=0){
            this.div.scrollTop-=this.h%this.height;
          }
          this.h=0;
          window.setTimeout(function(){self.play()},this.sec1);
          return;
        }
      }
    }
    window.setTimeout(function(){self.play()},this.sec2);
  },
  prev:function(){
    if(this.div.scrollTop == 0)
    this.div.scrollTop = this.div.scrollHeight/2;
    this.div.scrollTop -= this.height;
  },
  next:function(){
    if(this.div.scrollTop ==  this.div.scrollHeight/2)
    this.div.scrollTop =0;
    this.div.scrollTop += this.height;
  }
};
</script>
 <BODY>
<div id="bKey">
<div id="jFavList" class="keyBg">
<ul>
 <li class="x"><a href="http://c3.paran.com/?l=P111063">부시 8월 방한</a></li>
 <li><a href="http://c3.paran.com/?l=P111064">우리 구단 가입금</a></li>
</ul>
<ul>
 <li class="x"><a href="http://c3.paran.com/?l=P111065">진보신당 난입 폭행</a></li>
 <li><a href="http://c3.paran.com/?l=P111066">남규리 대시</a></li>
</ul>

<ul>
 <li class="x"><a href="http://c3.paran.com/?l=P111067">미국산 쇠고기 판매</a></li>
 <li><a href="http://c3.paran.com/?l=P111068">조중동 다음</a></li>
</ul>
<ul>
 <li class="x"><a href="http://c3.paran.com/?l=P111069">호나우지뉴 방한</a></li>
 <li><a href="http://c3.paran.com/?l=P111070">김구라 사과</a></li>
</ul>
<ul>
 <li class="x"><a href="http://c3.paran.com/?l=P111071">LPG가격 인상</a></li>
 <li><a href="http://c3.paran.com/?l=P111072">임창용 19세이브</a></li>
</ul>
<ul>
 <li class="x"><a href="http://c3.paran.com/?l=P111073">한전 납품비리</a></li>
 <li><a href="http://c3.paran.com/?l=P111074">유재석 웨딩사진</a></li>
</ul>
<ul>
 <li class="x"><a href="http://c3.paran.com/?l=P111075">채은정 비키니</a></li>

 <li><a href="http://c3.paran.com/?l=P111076">PD수첩 압수영장</a></li>
</ul>
<ul>
 <li class="x"><a href="http://c3.paran.com/?l=P111077">신혼부부 주택</a></li>
 <li><a href="http://c3.paran.com/?l=P111078">사제단 시국미사</a></li>
</ul>
</div>
<script type="text/javascript"> var hotKeyword = new scrolling("jFavList",3000,1,1,18); </script>

<div class="rollBtn" onmouseover="hotKeyword.div.isover=true;" onmouseout="hotKeyword.div.isover=false;">
  <a class="previous" onclick="hotKeyword.prev();" title="위로">[↑]</a>
  <a class="next" onclick="hotKeyword.next();" title="아래로">[↓]</a>
</div>
</div>


출처 : http://www.jakartaproject.com/article/javascripttip/121573854953934

Posted by 1010
반응형

JavaScriptMVC - develop with direction!

JavaScriptMVC is an open-source framework containing the best ideas in enterprise JavaScript development. It guides you to successfully completed projects by promoting best practices, maintainability, and convention over configuration.

Download JavaScriptMVC 2.0 Production (6.2 MB) Watch 2.0 Video

What's Inside?

We've made everything you should be doing as easy as possible.
  • Maintainability via the Model-View-Controller architecture pattern.
  • Application Concatination and Compression via include.
  • Testing via Test.
  • Documentation via include.Doc.
  • Error Reporting via DamnIT.
  • Updates and Dependancy Management via update.
  • Ajax and DOM functionality via jQuery.

The Plan.

  1. Download JavaScriptMVC
  2. Read the Getting Started Guide
  3. Learn the technology
  4. Explore the api

Showcase.

Checkout some of the companies using JavaScriptMVC:
Posted by 1010
반응형

Getting Started with the Closure Compiler Application

The Hello World of the Closure Compiler Application

The Closure Compiler application is a Java command-line utility that compresses, optimizes, and looks for mistakes in your JavaScript. To try out the Closure Compiler application with a simple JavaScript program, follow the steps below.

To work through this exercise you need the Java Runtime Environment version 6.

  1. Download the Closure Compiler package

    Create a working directory called closure-compiler.

    Download the Closure Compiler compiler.jar file and save it in closure-compiler.

  2. Create a JavaScript file

    Create a file named hello.js containing the following JavaScript:

    // A simple function. 
    function hello(longName) { 
      alert('Hello, ' + longName); 
    } 
    hello('New User');

    Save this file in the closure-compiler directory.

  3. Compile the JavaScript file

    Run the following command from the closure-compiler directory:

    java -jar compiler.jar --js hello.js --js_output_file hello-compiled.js
    

    This command creates a new file called hello-compiled.js, which contains the following JavaScript:

    function hello(a){alert("Hello, "+a)}hello("New User");

    Note that the compiler has stripped comments, whitespace and an unnecessary semi-colon. The compiler has also replaced the parameter name longName with the shorter name a. The result is a much smaller JavaScript file.

    To confirm that the compiled JavaScript code still works correctly, include hello-compiled.js in an HTML file like this one:

    <html> 
    <head><title>Hello World</title></head> 
    <body> 
    <script src="hello-compiled.js"></script> 
    </body> 
    </html>

    Load the HTML file in a browser, and you should see a friendly greeting!

Next Steps

This example illustrates only the most simple optimizations performed by the Closure Compiler. To learn more about the compiler's capabilities, read Advanced Compilation and Externs.

To learn more about other flags and options for the Closure Compiler, execute the jar with the --help flag:

java -jar compiler.jar --help
Posted by 1010
반응형

넘기는 url 이 post 방식을때 iis 405 에러가 나온다.
간단하게 method=get 로 변경하면 되지만 열리는 페이지에 쓸모없는 값들이 보인다.
이럴때는 그냥 맘편하게 원도우 오픈을 이용해서 하면 간단히 해결할수있다.

function linkSite(obj) {
 
 var f  = obj; 

 if(f.selSite.value == ""){
  alert("이동할 싸이트를 선택해 주세요.");
        return false;
 }else{ 
  //f.target ="_blank";    
  //f.action = obj.selSite.value;
  window.open(f.selSite.value, "", "width=950, height=650, menubar=yes, toolbar=yes,  location=yes, scrollbars=yes, resizable=yes ");
         //return true;
  return false;
 } 
 

Posted by 1010
반응형
<nobr style="text-overflow:ellipsis;overflow;hidden;width;250px"></nobr>
Posted by 1010
반응형

<html>
<head>
    <title>http://www.blueb.co.kr</title>

<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAdV0OihhLfo4ru8N1BXzlWxSJ87f2VNqmObhB7kj4DJwDOGkiiBR3Nh79Pxxmk0DgEb3TTwZHI-Fp1g"></script>
<script type="text/javascript" src="http://www.blueb.co.kr/SRC/javascript/js/gfeedfetcher.js"></script>
<style type="text/css">
.labelfield{ /*CSS for label field in general*/
color:brown;
font-size: 90%;
}

.datefield{ /*CSS for date field in general*/
color:gray;
font-size: 90%;
}

#example1 li{ /*CSS specific to demo 1*/
margin-bottom: 4px;
}

#example2 div{ /*CSS specific to demo 2*/
margin-bottom: 5px;
}

#example2 div a{ /*CSS specific to demo 2*/
text-decoration: none;
}

#example3 a{ /*CSS specific to demo 3*/
color: #D80101;
text-decoration: none;
font-weight: bold;
}

#example3 p{ /*CSS specific to demo 3*/
margin-bottom: 2px;
}

code{ /*CSS for insructions*/
color: red;
}
</style>
</head>
</body>


<b>Example 1: (Single RSS feed, 10 entries, "<code>date</code>" field enabled, sort by <code>title</code>)</b><p>
<a href="javascript:cssfeed.init()"><B>본 항목을 새로고침</B></a><br>
<script type="text/javascript">
var cssfeed=new gfeedfetcher("example1", "example1class", "")
    cssfeed.addFeed("문화일보", "http://news.naver.com/rss/rss_presscenter.nhn?office_id=021") //RSS주소 및 제목
    cssfeed.displayoptions("date") //날짜 필드 보여주기
    cssfeed.setentrycontainer("li") //정렬은 Li태그로
    cssfeed.filterfeed(10, "title") //목록은 10개
    cssfeed.init() //Always call this last
</script>
<br><br>

<b>Example 2: (Two RSS feeds, 6 entries, "<code>label"</code>, "<code>datetime</code>", and "<code>snippet</code>" fields enabled, sort by <code>label</code>)</b><p>
<a href="javascript:socialfeed.init()"><B>본 항목을 새로고침</B></a><br>
<script type="text/javascript">
var socialfeed=new gfeedfetcher("example2", "example2class", "_new")
    socialfeed.addFeed("동아일보", "http://news.naver.com/rss/rss_presscenter.nhn?office_id=020") //Specify "label" plus URL to RSS feed
    socialfeed.addFeed("조선일보", "http://news.naver.com/rss/rss_presscenter.nhn?office_id=023") //Specify "label" plus URL to RSS feed
    socialfeed.displayoptions("label datetime snippet") //show the specified additional fields
    socialfeed.setentrycontainer("div") //Display each entry as a DIV
    socialfeed.filterfeed(6, "label") //Show 6 entries, sort by label
    socialfeed.init() //Always call this last
</script>
<br><br>


<b>Example 3: (Three RSS feeds, 8 entries, "<code>datetime</code>" and "<code>snippet</code>" fields enabled, sort by <code>date</code>)</b><p>
<a href="javascript:newsfeed.init()"><B>본 항목을 새로고침</B></a><br>

<script type="text/javascript">
var newsfeed=new gfeedfetcher("example3", "example3class", "_new")
    newsfeed.addFeed("서울신문", "http://news.naver.com/rss/rss_presscenter.nhn?office_id=081") //Specify "label" plus URL to RSS feed
    newsfeed.addFeed("한겨레", "http://news.naver.com/rss/rss_presscenter.nhn?office_id=028") //Specify "label" plus URL to RSS feed
    newsfeed.addFeed("중앙일보", "http://news.naver.com/rss/rss_presscenter.nhn?office_id=025") //Specify "label" plus URL to RSS feed
    newsfeed.displayoptions("datetime snippet") //show the specified additional fields
    newsfeed.setentrycontainer("p") //Display each entry as a paragraph
    newsfeed.filterfeed(8, "date") //Show 8 entries, sort by date
    newsfeed.init() //Always call this last
</script>


</body>
</html> 

Posted by 1010
반응형

특수문자

ISO Entities

Name Code Number Code Glyph Description
&lsquo;     left single quote
&rsquo;     right single quote
&sbquo;     single low-9 quote
&ldquo;     left double quote
&rdquo;     right double quote
&bdquo;     double low-9 quote
&dagger;     dagger
&Dagger;     double dagger
&permil;     per mill sign
&lsaquo;     single left-pointing angle quote
&rsaquo;     single right-pointing angle quote
&spades;     black spade suit
&clubs;     black club suit
&hearts;     black heart suit
&diams;     black diamond suit
&oline;     overline, = spacing overscore
&larr;     leftward arrow
&uarr;     upward arrow
&rarr;     rightward arrow
&darr;     downward arrow
&trade;     trademark sign
 
Name Code Number Code Glyph Description
  &#09; horizontal tab
  &#10; line feed
  &#32; space
  &#33; !  exclamation mark
&quot; &#34; "  double quotation mark
  &#35; #  number sign
  &#36; $  dollar sign
  &#37; %  percent sign
&amp; &#38; &  ampersand
  &#39; '  apostrophe
  &#40; (  left parenthesis
  &#41; )  right parenthesis
  &#42; *  asterisk
  &#43; +  plus sign
  &#44; ,  comma
  &#45; -  hyphen
  &#46; .  period
 
Name Code Number Code Glyph Description
&frasl; &#47; /  slash
  &#48;-
&#57;
  digits 0-9
  &#58; :  colon
  &#59; ;  semicolon
&lt; &#60; <  less-than sign
  &#61; =  equals sign
&gt; &#62; >  greater-than sign
  &#63; ?  question mark
  &#64; @  at sign
  &#65;-
&#90;
  uppercase letters A-Z
  &#91; [  left square bracket
  &#92; \  backslash
  &#93; ]  right square bracket
  &#94; ^  caret
  &#95; _  horizontal bar (underscore)
  &#96; `  grave accent
  &#97;-
&#122;
  lowercase letters a-z
  &#123; {  left curly brace
  &#124; |  vertical bar
 
Name Code Number Code Glyph Description
  &#125; }  right curly brace
  &#126; ~  tilde
  &#127;-
&#149;
  unused
&ndash; &#150;   en dash
&mdash; &#151;   em dash
  &#152;-
&#159;
  unused
&nbsp; &#160;    nonbreaking space
&iexcl; &#161; ¡  inverted exclamation
&cent; &#162; ¢  cent sign
&pound; &#163; £  pound sterling
&curren; &#164; ¤  general currency sign
&yen; &#165; ¥  yen sign
&brvbar; or &brkbar; &#166; ¦  broken vertical bar
&sect; &#167; §  section sign
&uml; or &die; &#168; ¨  umlaut
&copy; &#169; ©  copyright
&ordf; &#170; ª  feminine ordinal
&laquo; &#171; «  left angle quote
&not; &#172; ¬  not sign
&shy; &#173; ­  soft hyphen
&reg; &#174; ®  registered trademark
&macr; or &hibar; &#175; ¯  macron accent
 
Name Code Number Code Glyph Description
&deg; &#176; °  degree sign
&plusmn; &#177; ±  plus or minus
&sup2; &#178; ²  superscript two
&sup3; &#179; ³  superscript three
&acute; &#180; ´  acute accent
&micro; &#181; µ  micro sign
&para; &#182;   paragraph sign
&middot; &#183; ·  middle dot
&cedil; &#184; ¸  cedilla
&sup1; &#185; ¹  superscript one
&ordm; &#186; º  masculine ordinal
&raquo; &#187; »  right angle quote
&frac14; &#188; ¼  one-fourth
&frac12; &#189; ½  one-half
&frac34; &#190; ¾  three-fourths
&iquest; &#191; ¿  inverted question mark
&Agrave; &#192; À  uppercase A, grave accent
&Aacute; &#193; Á  uppercase A, acute accent
&Acirc; &#194;   uppercase A, circumflex accent
 
Name Code Number Code Glyph Description
&Atilde; &#195; à uppercase A, tilde
&Auml; &#196; Ä  uppercase A, umlaut
&Aring; &#197; Å  uppercase A, ring
&AElig; &#198; Æ  uppercase AE
&Ccedil; &#199; Ç  uppercase C, cedilla
&Egrave; &#200; È  uppercase E, grave accent
&Eacute; &#201; É  uppercase E, acute accent
&Ecirc; &#202; Ê  uppercase E, circumflex accent
&Euml; &#203; Ë  uppercase E, umlaut
&Igrave; &#204; Ì  uppercase I, grave accent
&Iacute; &#205; Í  uppercase I, acute accent
&Icirc; &#206; Π uppercase I, circumflex accent
&Iuml; &#207; Ï  uppercase I, umlaut
&ETH; &#208; Р uppercase Eth, Icelandic
&Ntilde; &#209; Ñ  uppercase N, tilde
&Ograve; &#210; Ò  uppercase O, grave accent
&Oacute; &#211; Ó  uppercase O, acute accent
&Ocirc; &#212; Ô  uppercase O, circumflex accent
&Otilde; &#213; Õ  uppercase O, tilde
 
Name Code Number Code Glyph Description
&Ouml; &#214; Ö  uppercase O, umlaut
&times; &#215; ×  multiplication sign
&Oslash; &#216; Ø  uppercase O, slash
&Ugrave; &#217; Ù  uppercase U, grave accent
&Uacute; &#218; Ú  uppercase U, acute accent
&Ucirc; &#219; Û  uppercase U, circumflex accent
&Uuml; &#220; Ü  uppercase U, umlaut
&Yacute; &#221; Ý  uppercase Y, acute accent
&THORN; &#222; Þ  uppercase THORN, Icelandic
&szlig; &#223; ß  lowercase sharps, German
&agrave; &#224; à  lowercase a, grave accent
&aacute; &#225; á  lowercase a, acute accent
&acirc; &#226; â  lowercase a, circumflex accent
&atilde; &#227; ã  lowercase a, tilde
&auml; &#228; ä  lowercase a, umlaut
&aring; &#229; å  lowercase a, ring
&aelig; &#230; æ  lowercase ae
&ccedil; &#231; ç  lowercase c, cedilla
&egrave; &#232; è  lowercase e, grave accent
 
Name Code Number Code Glyph Description
&eacute; &#233; é  lowercase e, acute accent
&ecirc; &#234; ê  lowercase e, circumflex accent
&euml; &#235; ë  lowercase e, umlaut
&igrave; &#236; ì  lowercase i, grave accent
&iacute; &#237; í  lowercase i, acute accent
&icirc; &#238; î  lowercase i, circumflex accent
&iuml; &#239; ï  lowercase i, umlaut
&eth; &#240; ð  lowercase eth, Icelandic
&ntilde; &#241; ñ  lowercase n, tilde
&ograve; &#242; ò  lowercase o, grave accent
&oacute; &#243; ó  lowercase o, acute accent
&ocirc; &#244; ô  lowercase o, circumflex accent
&otilde; &#245; õ  lowercase o, tilde
&ouml; &#246; ö  lowercase o, umlaut
&divide; &#247; ÷  division sign
&oslash; &#248; ø  lowercase o, slash
&ugrave; &#249; ù  lowercase u, grave accent
&uacute; &#250; ú  lowercase u, acute accent
&ucirc; &#251; û  lowercase u, circumflex accent
 
Name Code Number Code Glyph Description
&uuml; &#252; ü  lowercase u, umlaut
&yacute; &#253; ý  lowercase y, acute accent
&thorn; &#254; þ  lowercase thorn, Icelandic
&yuml; &#255; ÿ  lowercase y, umlaut


From : http://www.webmonkey.com
Posted by 1010
반응형
<br>

<style type="text/css">
.black { COLOR:black; }
.red { COLOR:#FF0000; }
.blue { COLOR:BLUE; }
</style>


<font onMouseOver="this.className='red';" onMouseOut="this.className='black';">바보</font>

<br>

<font onMouseOver="this.className='blue';" onMouseOut="this.className='black';">천재</font>

----------------------------------

<td onMouseOver=bgColor="#999999" onMouseOut=bgColor="#000000" bgcolor="#000000"> 내용 </td>

마우스를 올렸을 때의 색상은 onMouseOver=bgColor="#999999"
마우스를 내렸을 때의 색상은 onMouseOut=bgColor="#000000" bgcolor="#000000"

------------------------------------

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--

function setTrColor(obj, color){
        obj.style.backgroundColor=color;
        obj.onmouseout = function(){
                obj.style.backgroundColor=''; //mouseout 시 색상
        }
}
// 뭐...대충 궁여지책으로..ㅋ.ㅋ
//-->
</SCRIPT>

<BODY>
<TABLE width="300" border="1">
<TR onMouseOver="setTrColor(this, '#c0c0c0')" >
        <TD>1</TD>
        <TD>2</TD>
        <TD>3</TD>
</TR>
<TR onMouseOver="setTrColor(this, '#c0c0c0')">
        <TD>4</TD>
        <TD>5</TD>
        <TD>6</TD>
</TR>
<TR onMouseOver="setTrColor(this, '#c0c0c0')">
        <TD>7</TD>
        <TD>8</TD>
        <TD>9</TD>
</TR>
<TR onMouseOver="setTrColor(this, '#c0c0c0')">
        <TD>7</TD>
        <TD>8</TD>
        <TD>9</TD>
</TR>

</TABLE>
</BODY>
</HTML>

-------------------------

<td onMouseOver="this.style.backgroundColor='#cccccc'" style="CURSOR: hand" onMouseOut="this.style.backgroundColor=''" bgColor=#e4e4e4> </td>

Posted by 1010
반응형

/** 기준소스 IE 전용
    //spec1
     if(document.all.part[0].checked== true) { 
       document.all.spec1[0].disabled=false;
       document.all.spec1[1].disabled=false;
     }else  { 
       document.all.spec1[0].disabled=true;
       document.all.spec1[1].disabled=true;
     }
 
  //spec2  
      if(document.all.part[1].checked== true) { 
       document.all.spec2[0].disabled=false;
       document.all.spec2[1].disabled=false;
     }else  { 
       document.all.spec2[0].disabled=true;
       document.all.spec2[1].disabled=true;
     }
    
   
   //spec3 
     if(document.all.part[2].checked== true) { 
       document.all.spec3[0].disabled=false;
       document.all.spec3[1].disabled=false;
     }else  { 
       document.all.spec3[0].disabled=true;
       document.all.spec3[1].disabled=true;
     }
    
      //spec4 
     if(document.all.part[3].checked== true) { 
       document.all.spec4[0].disabled=false;
       document.all.spec4[1].disabled=false;
       document.all.spec4[2].disabled=false;
     }else  { 
       document.all.spec4[0].disabled=true;
       document.all.spec4[1].disabled=true;
       document.all.spec4[2].disabled=true;
     }
     
     //spec5
     if(document.all.part[4].checked== true) { 
       document.all.spec5[0].disabled=false;
       document.all.spec5[1].disabled=false;
       document.all.spec5[2].disabled=false;
     }else  { 
       document.all.spec5[0].disabled=true;
       document.all.spec5[1].disabled=true;
       document.all.spec5[2].disabled=true;
     }
    
     //spec6 
     if(document.all.part[5].checked== true) { 
       document.all.spec6[0].disabled=false;
       document.all.spec6[1].disabled=false;
       document.all.spec6[2].disabled=false;
     }else  { 
       document.all.spec6[0].disabled=true;
       document.all.spec6[1].disabled=true;
       document.all.spec6[2].disabled=true;
     }
    
       //spec7
     if(document.all.part[6].checked== true) { 
       document.all.spec7[0].disabled=false;
       document.all.spec7[1].disabled=false;
       document.all.spec7[2].disabled=false;
     }else  { 
       document.all.spec7[0].disabled=true;
       document.all.spec7[1].disabled=true;
       document.all.spec7[2].disabled=true;
     }
   
   //spec8
     if(document.all.part[7].checked== true) { 
       document.all.spec8[0].disabled=false;
       document.all.spec8[1].disabled=false;
     }else  { 
       document.all.spec8[0].disabled=true;
       document.all.spec8[1].disabled=true; 
     }
    
     //spec9
     if(document.all.part[8].checked== true) { 
       document.all.spec9[0].disabled=false;
       document.all.spec9[1].disabled=false;
       document.all.spec9[2].disabled=false;
     }else  { 
       document.all.spec9[0].disabled=true;
       document.all.spec9[1].disabled=true; 
       document.all.spec9[2].disabled=true;
     }
    
     //spec10
     if(document.all.part[9].checked== true) { 
       document.all.spec10[0].disabled=false;
       document.all.spec10[1].disabled=false;
       document.all.spec10[2].disabled=false;
     }else  { 
       document.all.spec10[0].disabled=true;
       document.all.spec10[1].disabled=true;
       document.all.spec10[2].disabled=true;
     }
     */

     // 2009.10.26 (anhanho)
     // 지원분야에 맞는 자격요건 체크
     // IE,EE
     var specList = [2,2,2,3,3,3,3,2,3,3]; // 배열의 값이 자동으로 세팅되도록 바꿔줘야함...
     for (var i = 0; i < document.frmInput.part.length; i++) { 
    for(var x = 0 ; x < specList[i] ; x++){
     if(document.frmInput.part[i].checked == true){ 
      document.getElementsByName('spec'+(i+1))[x].disabled = false;
     }else{
      document.getElementsByName('spec'+(i+1))[x].checked = false; 
      document.getElementsByName('spec'+(i+1))[x].disabled = true; 
     }
       }
     }

Posted by 1010
반응형

<html>
<head>
<script language="javascript">
function setCookie (name, value, expires) {
  document.cookie = name + "=" + escape (value) +
    "; path=/; expires=" + expires.toGMTString();
}

function getCookie(Name) {
  var search = Name + "="
  if (document.cookie.length > 0) { // 쿠키가 설정되어 있다면
    offset = document.cookie.indexOf(search)
    if (offset != -1) { // 쿠키가 존재하면
      offset += search.length
      // set index of beginning of value
      end = document.cookie.indexOf(";", offset)
      // 쿠키 값의 마지막 위치 인덱스 번호 설정
      if (end == -1)
        end = document.cookie.length
      return unescape(document.cookie.substring(offset, end))
    }
  }
  return "";
}
function saveid(form) {
  var expdate = new Date();
  // 기본적으로 30일동안 기억하게 함. 일수를 조절하려면 * 30에서 숫자를 조절하면 됨
  if (form.checksaveid.checked)
    expdate.setTime(expdate.getTime() + 1000 * 3600 * 24 * 30); // 30일
  else
    expdate.setTime(expdate.getTime() - 1); // 쿠키 삭제조건
  setCookie("saveid", form.id.value, expdate);
}
function getid(form) {
  form.checksaveid.checked = ((form.id.value = getCookie("saveid")) != "");
}
</script>
</head>
<body onLoad="getid(document.mainform)">
<form name=mainform>
아이디 <input type=text name=id>
암호 <input type=password name=pw>
<input type=checkbox name=checksaveid onClick="saveid(this.form)">아이디 기억
</form>
</body>
</html>

Posted by 1010
반응형

아이디 저장 자바스크립트


//----------------------------------------------//
// 홈페이지 로그인 관련 스크립트
//
// 만든넘 : 심재진
//
//----------------------------------------------//

//----------------------------------------------//
// 로그인 버튼 클릭했을때 호출되는 함수
//----------------------------------------------//
function login(){
    document.myform.id.value = document.myform.id.value.split(" ").join("");
    document.myform.password.value = document.myform.password.value.split(" ").join("");
    var id = document.myform.id.value;
    var password = document.myform.password.value;

    var msg = "";
    if(id.length == 0){
        msg +="☞ 사용자 아이디를 입력하세요.\n";
    }
    if(password.length == 0 && msg.length == 0){
        msg +="☞ 사용자 비밀번호를 입력하세요.";
    }
    // 아이디 저장 설정
    if(document.myform.save.checked){
        setCookie("com.ckaist.id", id, null, null);
    }else{
        setCookie("com.ckaist.id", "", null, null);
    }
    if(msg.length > 0){
        alert(msg);
    }else{
        document.myform.target = document.hiddenFrame.name;
        document.myform.submit();
    }
    if(login.arguments.length == 1){
        self.close();
    }
}

//----------------------------------------------//
// 아이디 저장 옵션 관리 함수
//----------------------------------------------//
function load(){
    var id = getCookie("com.ckaist.id");
    if(id != null && id != ""){
        document.myform.id.value = id;
        document.myform.save.checked = true;
        document.myform.password.focus();
    }else{
        document.myform.id.focus();
    }
    // 좌측 메뉴 클릭 정보 삭제
    setCookie("mencode", "0", "/");
    setCookie("topcode", "0", "/");
    setCookie("refcode", "0", "/");
}

//----------------------------------------------//
// 로그아웃 버튼 눌렀을때 호출
//----------------------------------------------//
function logout(){
    document.myform.target = document.hiddenFrame.name;
    document.myform.submit();
}

//----------------------------------------------//
// 패스워드 필드에 타이핑할때 검사
//----------------------------------------------//
function formsubmit(){
    if(event.keyCode == 13)
        login();
}

//----------------------------------------------//
// 쿠키 핸들링 관련 함수들
//----------------------------------------------//
function setCookie (name,value,path,domain,secure) {
   var expires = new Date();
   expires.setMonth(expires.getMonth() + 1)

  document.cookie = name + "=" + escape (value) +
    ((expires) ? "; expires=" + expires.toGMTString() : "") +
    ((path) ? "; path=" + path : "") +
    ((domain) ? "; domain=" + domain : "") +
    ((secure) ? "; secure" : "");
}

function getCookie (name) {
 var arg = name + "=";
 var alen = arg.length;
 var clen = document.cookie.length;
 var i = 0;
 while (i < clen) {
     var j = i + alen;
     if (document.cookie.substring(i, j) == arg)
       return getCookieVal (j);
     i = document.cookie.indexOf(" ", i) + 1;
     if (i == 0) break;
 }
 return null;
}

function getCookieVal (offset) {
  var endstr = document.cookie.indexOf (";", offset);
  if (endstr == -1)
    endstr = document.cookie.length;
  return unescape(document.cookie.substring(offset, endstr));
}

/*
 * 우편번호 검색창을 띄우는 함수
 * 인자값 : 우편번호 앞자리 INPUT BOX 이름, 우편번호 뒷자리 INPUT BOX 이름, 주소 INPUT BOX 이름
 */
function findPost(form_name_post1, form_name_post2, form_name_addr){
    var win;
    if(win == null){
        win = window.open("/comm/com_zip/comzip_find.jsp?post1="+form_name_post1+"&post2="+form_name_post2+"&addr="+form_name_addr, "zip_search", "resizable=yes,width=500,height=300,location=no,scrollbars=yes, menubar=no");
    }
    win.focus();
}

/*
 * create by 박범서 , create date : 2001-09-11
 * id/pw 조회
 */
function findIdpw(){
    var win;
    if(win == null){
        win = window.open("/main/idpw.jsp", "idpw_search", "resizable=yes,width=362,height=250,location=no,scrollbars=no, menubar=no");
    }
    win.focus();
}


//----------------------------------------------//
// 이미지 온-오버 관련 스크립트 들
//----------------------------------------------//
function namosw_exchange_src()
{
  str = namosw_exchange_src.arguments[0];
  str = (navigator.appName == 'Netscape') ? 'document.' + str : 'document.all.' + str;
  img = eval(str);
  if (img) {
    if (img.ori_src == null) {
      img.ori_src = img.src;
      img.src     = namosw_exchange_src.arguments[1];
    } else {
      var temp    = img.src;
      img.src     = img.ori_src;
      img.ori_src = temp;
    }
  }
}

function namosw_preload_img()
{
  var img_list = namosw_preload_img.arguments;
  if (document.preloadlist == null)
    document.preloadlist = new Array();
  var top = document.preloadlist.length;
  for (var i=0; i < img_list.length; i++) {
    document.preloadlist[top+i]     = new Image;
    document.preloadlist[top+i].src = img_list[i];
  }
}

function msg_open_win()
{
 window.open('/common/com_msg/commsg_main.jsp',"memo",'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=auto,resizable=no,width=420,height=380');
}


//----------------------------------------------//
// ID/PWD 찾기 호출되는 함수
//----------------------------------------------//
function find_idpassword(){
    //document.myform.usrname.value = document.myform.usrname.value.split(" ").join("");
    document.myform.jumin.value = document.myform.jumin.value.split(" ").join("");
    var usrname = document.myform.usrname.value;
    var jumin = document.myform.jumin.value;

    var msg = "";
    if(usrname.length == 0){
        msg +="☞ 사용자 이름을 입력하세요.\n";
    }
    if(jumin.length != 14 && msg.length == 0){
        msg +="☞ 사용자 주민등록번호를 입력하세요.";
    }
    if(msg.length > 0){
        alert(msg);
    } else {
        //document.myform.target = document.hiddenFrame.name;
        document.myform.submit();
    }
}

//----------------------------------------------//
// ID/PWD 찾기  주민번호 필드에 타이핑할때 검사
//----------------------------------------------//
function entercheck(){
    if(event.keyCode == 13)
        find_idpassword();
}

출처 : http://hob.springnote.com/pages/234918?print=1

Posted by 1010
반응형
style="background-repeat:no-repeat;

-------------

  이번 강좌에서는 컬러와 관련된 스타일 시트에 대해서 알아보도록 하겠습니다. 컬러와 관련된 스타일 시트 속성으로는  color , background-color , background-image , background-repeat , background-attachment , background-position , background 등이 있습니다. 모두 다  색상, 배경색과 배경이미지에 대한 것들인데요....그렇게 어려운 것은 없을 테니 설명 잘 들으시기 바라겠습니다. ^^
 
 ☞ color , background-color
  말 그대로 색상과 배경색을 지정해주는 속성입니다. 사용방법은 아래와 같습니다.
 

 body { color:red; background-color:#FFFFF; }

 더 이상 설명이 필요 없겠죠? ^^ 아...그리고 색상을 지정해줄 때  위에 예제에서와 같이 두 가지 방법이 있는데요..첫째는 영문색상명(red , blud , yellow , black ...등등)을 적어주는 것이고 두 번째는 RGB색상코드를 적어주는 방법입니다. RGB색상코드에 대해서 알고싶으신 분은 ☞여기를 클릭해보시면 알 수 있습니다.   간단한 예제 하나 보고 넘어가도록 하죠 ^^

 <style type="text/css">
 <!--
  body { color : darkblue ; background-color : #CC99FF ; font-weight:bold; }
  -->
 </style>
 <body>
  <p>내가 당신을 얼마만큼 사랑하는지 당신은 알지 못합니다.
이른 아침, 감은 눈을 억지스레 떠야하는 피곤한 마음 속에도
나른함 속에 파묻힌 체 허덕이는 오후의 앳된 심정속에도
당신의 그 사랑스러운 모습은 담겨 있습니다.  </p>
 </body>

 ☞ background-image , background-repeat  background-image 속성은 말 안 해도 알고 계시겠죠? ^^ 그쵸. 배경이미지를 지정해주는 속성이죠. background-repeat 속성은, 일반적으로 우리가 HTML를 사용해서 배경이미지를 넣으면 웹페이지의 화면보다 배경이미지가 작은 경우 배경이미지가 화면에 좌우로 반복이 되어서 채워지게 됩니다. 이걸 전문용어로 패턴이라고 하는데요..이러한 패턴을 조절해주는 속성입니다. 조절하기에 따라 한 방향으로만 패턴 되도록 하게 할 수 도 있으며 아예 패턴없이 표현할 수도 있습니다.
 background-image 속성의 사용방법은 다음과 같습니다.

b { background-image: url(http://tagmania.net/img/filter1.gif) ;}

 background-repeat 속성은 네가지의 값을 정해줄 수 있는데요.....다음과 같습니다.

 no-repeat : 배경이미지가 반복이 안되게 합니다.  repeat : 모든 방향으로 반복되게 합니다.
 repeat-x : x방향(가로)으로만 반복되게 합니다.  repeat-y : y방향(세로)으로만 반복되게 합니다.

 즉 , background-repeat : repeat-x ☜이런 식으로 값을 넣어줄 수 있습니다.
  지면 관계상 예제는 다음페이지에서 보도록 하겠습니다. 넘어 가죠? ^^


출처 : http://tagmania.net/html/css5_1_n.php

Posted by 1010
반응형
Posted by 1010
반응형
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title>테스트</title>
<meta http-equiv="imagetoolbar" content="no">
</head>
<frameset rows="*">
<frame name="index" src="/test/test.html" title="테스트">
</frameset>
<noframes>
<body oncontextmenu=return false ondragstart=return false onselectstart=return false></body>
</noframes>
</html>

IE6에서 위의 소스는 가로스크롤이 생겨버린다. 하지만 아래와 같이 하면 스크롤이 없어져 버린다.
차이점은 바로 scrolling="yes" 이것만 넣어주면 가로스크롤이 없어진다.
인터넷에서 찾아보면 다른방법도 몇가지 나오지만 아래방법이 가장 손쉽게 해결되는 솔루션임.
하지만 또 언제 무슨문제가 생길지는 모른다는거.. ^^

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title>테스트</title>
<meta http-equiv="imagetoolbar" content="no">
</head>
<frameset rows="*">
<frame name="index" src="/test/test.html" title="테스트" scrolling="yes">
</frameset>
<noframes>
<body oncontextmenu=return false ondragstart=return false onselectstart=return false></body>


출처 : http://haroc.haroc.net/tc/311


--------------------------------------------

div 가운데 정렬

{margin:0 auto;}를 사용해서 센터정렬시켰는데요


ie6에서는 세로 스크롤이 생기면


세로스크롤만큼의 가로스크롤이 생겨버리는데


가로스크롤이 나오지 않게 하려면 어떻게 해야할까요?




소스입니다...

----- 프레임셋 -----


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<frameset rows="0,*" border="0" framespacing="0">
  <frame name="topFrame" noresize scrolling="no" marginwidth="0" marginheight="0" frameborder="0">
  <frame name="mainFrame" src="main.php" scrolling="auto" marginwidth="0" marginheight="0" frameborder="0">
</frameset>
</html>


-----  main.php  -----


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>title</title>

<style>

#dvWrap { margin:0 auto; width:920px;}

</style>
</head>

<body>
<div id="dvWrap">

세로스크롤이 생기면 가로스크롤이 생겨요

</div>

</body>

</html>


#dvWrap { position:absolute; left:50%; margin-left:-460px;}
margin:0 auto 대신 이렇게 써주니까 가로스크롤이 안생기네요..


세로 스크롤바가 생기면서 스크롤바의 크기만큼 영역을 차지해서 본문이 넘친다고 생각해서 가로스크롤바가 생겨나는 것 같습니다. overflow-x: hidden; 으로 하시거나 본문의 사이즈를 조금 더 늘려보세요.


overflow-x:hidden을 해보았지만 적용이 되지 않네요 IE버그라고 하는데 해결방법이 없는건지









<body style="text-align:center;">
<div sytle="width:200px;height:200px;border:1px solid red;">
</body>

와 같이 div를 center로 위치 시키면 span같은
text-level box는 가운데로 오는데, div 가운데로 오지 않는군요.

일반적으로 FF 에서는 어떤 방법으로 div를 centering을 하는지 알고 싶습니다.

물론 table속에 div를 넣는 방법은 말고 말입니다.

고견을 들려 주세요...


가운데 정렬은

코드:
body { text-align:center;}

// 먼저 전체 바디에 가운데 정렬을 줍니다.

전체 레이아웃을 시작하는 div가

코드:
<div id="wrap">

이라면

코드:
#wrap {margin:0 auto; text-align:left;}

// 텍스트는 좌측 정렬로 주고요. margin:0 auto; 이것이 가운데 정렬을 하란 말이 되겠습니다.

margin:top right bottom left; // 이런건 아시죠?
margin: 5px 5px 5px 5px; // 1번
margin:5px; // 2번
1번 = 2번
margin:5px 0 5px 0; // 3번 : 0일땐 단위를 쓰지 않고, 그 이상일 때는 단위를 씁니다.
margin:5px 0; // 4번
3번=4번

이런 식이니
margin:0 auto; 는 margin : 0 auto 0 auto; 와 같은 뜻이 되겠습니당.^^


Posted by 1010
반응형
Posted by 1010