728x90
출처 : http://firejune.com/98&ct1=8&ct2=42

아래의 소스를 새창을 띄울 부모문서의 <head></head>사이에 넣어 주세요 

<SCRIPT LANGUAGE="JavaScript">
<!--
function getCookie( name ){
var nameOfCookie = name + "=";
var x = 0;
while ( x <= document.cookie.length )
{
var y = (x+nameOfCookie.length);
if ( document.cookie.substring( x, y ) == nameOfCookie ) {
if ( (endOfCookie=document.cookie.indexOf( ";", y )) == -1 )
endOfCookie = document.cookie.length;
return unescape( document.cookie.substring( y, endOfCookie ) );
}
x = document.cookie.indexOf( " ", x ) + 1;
if ( x == 0 )
break;
}
return "";
}

//폼의 체크 박스를 체그 하면 새창이 나타나지 않으며, 체크 하지 않았을 경우, 계속 나타납니다.

if ( getCookie( "Notice" ) != "done" ) {
//새창으로 열릴 페이지의 경로 및 크기와 위치를 지정해 주세요.
noticeWindow  =  window.open('http://www.wowman.org','notice','left=0, top=0, width="30"0,height=200');
noticeWindow.opener = self; }

// -->
</SCRIPT>




아래의 소스를 새창으로 열릴 문서의 <head>와</head> <span class="key1" onclick="keyword_open('/kview.php?kd=%ED%83%9C%EA%B7%B8+')">태그 </span>사이에 넣어주세요

<SCRIPT language="JavaScript">
<!--
function setCookie( name, value, expiredays )
{
var todayDate = new Date();
todayDate.setDate( todayDate.getDate() + expiredays );
document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
}

function closeWin()
{
if ( document.pop.Notice.checked )
setCookie( "Notice", "done" , 1);//1은 하루동안 새창을 열지 않게 합니다.
window.close();
}
// -->
</SCRIPT>


아래의 소스를 새창으로 새창으로 열릴 문서의  <body>와</body><span class="key1" onclick="keyword_open('/kview.php?kd=%ED%83%9C%EA%B7%B8+')">태그 </span>사이에 넣어주세요



<form name=pop>
<p align="center">
<input type=checkbox name="Notice" value="">다음부터 공지창 띄우지 않음<a href="javascript:history.onclick=closeWin()">[닫기]</a>  
</form>
728x90

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

랜덤 이미지 출력  (0) 2007.05.25
자바스크립트로 마우스 휠 제어하기  (0) 2007.05.25
텍스트영역 리사이즈 컴포넌트  (0) 2007.05.25
728x90
최근 Ajax의 활용범위가 확대되면서 슬라이더, 드래그앤 드롭, 소테이블, 백그라운드 업로더, 드래그 선택영역, 오토 컴플리케이션 등 부수적인 웹 인터페이스가 자바스크립트로 속속들이 구현되고 있다. 마우스 버튼은 물론 키보드까지 DHTML로 제어하는 이 시점에서 마우스 인풋없는 웹서핑은 상상조차 할 수 없게 되었다. 이러한 가운데 Adomas Paltanavicius자바스크립트를 이용하여 휠을 제어하는 자바스크립트 코드까지 공개하였다. IE와 파이어폭스 등의 브라우저에서 작동하며 테스트 페이지에서 작동하는 모습을 확인할 수 있다.(뭔가 재미있는 생각이 떠오르지 않는가?)

/* This is high-level function.  */
function handle(delta) {
   var s = delta + ": ";
   if (delta < 0)  s += "down";
   else s += "up";
   document.getElementById('delta').innerHTML = s;
}

/* Event handler for mouse wheel event. */
function wheel(event){
   var delta = 0;
   if (!event) event = window.event;
   if (event.wheelDelta) {
       delta = event.wheelDelta/120;
       if (window.opera) delta = -delta;
   } else if (event.detail) delta = -event.detail/3;
   if (delta) handle(delta);
}

/* Initialization code. */
if (window.addEventListener)
   window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;

출처 : http://firejune.com/922&ct1=8&ct2=42
728x90
728x90
Richard McMahon씨는 Prototype을 이용한 "ResizingTextArea" 컴포넌트를 만들고 공개했다. 이 컴포넌트는 클릭(click)과 키업(keyup)이벤트를 할당하여 텍스트 영역의 Row를 감시하고 실시간으로 리사이즈 한다. 이 블로그의 댓글과 방명록 텍스트 영역에 적용해 보았다.(썩 쓸만함)

/**
* ResizingTextArea Component
* Richard McMahon(http://jroller.com)
*/

var ResizingTextArea = Class.create();
ResizingTextArea.prototype = {
   defaultRows: 1,
   initialize: function(field) {
       this.defaultRows = Math.max(field.rows, 1);
       this.resizeNeeded = this.resizeNeeded.bindAsEventListener(this);
       Event.observe(field, "click", this.resizeNeeded);
       Event.observe(field, "keyup", this.resizeNeeded);
   },
   resizeNeeded: function(event) {
       var t = Event.element(event);
       var lines = t.value.split('\n');
       var newRows = lines.length + 1;
       var oldRows = t.rows;
       for (var i = 0; i < lines.length; i++) {
           var line = lines[i];
           if (line.length >= t.cols) newRows += Math.floor(line.length / t.cols);
       }
       if (newRows > t.rows) t.rows = newRows;
       if (newRows < t.rows) t.rows = Math.max(this.defaultRows, newRows);
   }
}

사용법 : <textarea ... onfocus="new ResizingTextArea(this);">

출처 : http://firejune.com/1026&ct1=8&ct2=42
728x90
728x90
728x90
728x90

출처 : http://www.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/

CSS isn’t always easy to deal with. Depending on your skills and your experience, CSS coding can sometimes become a nightmare, particularly if you aren’t sure which selectors are actually being applied to document elements. An easy way to minimize the complexity of the code is as useful as not-so-well-known CSS attributes and properties you can use to create a semantically correct markup.

We’ve taken a close look at some of the most interesting and useful CSS tricks, tips, ideas, methods, techniques and coding solutions and listed them below. We also included some basic techniques you can probably use in every project you are developing, but which are hard to find once you need them.

And what has come out of it is an overview of over 70 expert tips, which can improve your efficiency of CSS coding. You might be willing to check out the list of references and related articles in the end of this post.

We’d like to express sincere thank to all designers who shared their ideas, techniques, methods, knowledge and experience with their readers. Thank you, we, coders, designers, developers, information architects - you name it - really appreciate it.

1.1. Workflow: Getting Started

  • After you have a design, start with a blank page of content. “Include your headers, your navigation, a sample of the content, and your footer. Then start adding your html markup. Then start adding your CSS. It works out much better.” [CSSing]
  • Reset your CSS-styles first. “You can often eliminate the need to specify a value for a property by taking advantage of that property’s default value. Some people like doing a Global white space reset by zeroing both margin and padding for all elements at the top of their stylesheets. Eric Meyer’s Global Reset, Christian Montoya’s initial CSS file, Mike Rundle’s initial CSS file, Ping Mag’s initial CSS file. [Roger Johansson]
  • Use a master stylesheet. “One of the most common mistakes I see beginners and intermediates fall victim to when it comes to CSS is not removing the default browser styling. This leads to inconsistencies in the appearance of your design across browsers, and ultimately leaves a lot of designers blaming the browser. It is a misplaced blame, of course. Before you do anything else when coding a website, you should reset the styling.” [Master Stylesheet: The Most Useful CSS Technique], [Ryan Parr]
  1. master.css
  2. @import url("reset.css");
  3. @import url("global.css");
  4. @import url("flash.css");
  5. @import url("structure.css");
  1. <style type="text/css" media="Screen">
  2. /*\*/@import url("css/master.css");/**/
  3. </style>
  • Keep a library of helpful CSS classes. Useful for debugging, but should be avoided in the release version (separate markup and presentation). Since you can use multiple class names (i.e. <p class="floatLeft alignLeft width75">...</p>), make use of them debugging your markup. (updated) [Richard K. Miller]
  1. CSS:
  2. .width100 { width: 100%; }
  3. .width75 { width: 75%; }
  4. .width50 { width: 50%; }
  5. .floatLeft { float: left; }
  6. .floatRight { float: right; }
  7. .alignLeft { text-align: left; }
  8. .alignRight { text-align: right; }

1.2. Organize your CSS-code

  • Organize your CSS-styles, using master style sheets. “Organizing your CSS helps with future maintainability of the site. Start with a master style sheet. Within this style sheet import your reset.css, global.css, flash.css (if needed) and structure.css and on occasion a typography style sheet. Here is an example of a “master” style sheet and how it is embedded in the document:”
  1. h2 { }
  2. #snapshot_box h2 {
  3. padding: 0 0 6px 0;
  4. font: bold 14px/14px "Verdana", sans-serif; }
  5. #main_side h2 {
  6. color: #444;
  7. font: bold 14px/14px "Verdana", sans-serif; }
  8. .sidetagselection h2 {
  9. color: #fff;
  10. font: bold 14px/14px "Verdana", sans-serif; }
  • Organize your CSS-styles, using flags. “Divide your stylesheet into specific sections: i.e. Global Styles – (body, paragraphs, lists, etc), Header, Page Structure, Headings, Text Styles, Navigation, Forms, Comments, Extras. [5 Tips for Organizing Your CSS]
  1. /* -----------------------------------*/
  2. /* ---------->>> GLOBAL <<<-----------*/
  3. /* -----------------------------------*/
  • Organize your CSS-styles, making a table of contents. At the top of your CSS document, write out a table of contents. For example, you could outline the different areas that your CSS document is styling (header, main, footer etc). Then, use a large, obvious section break to separate the areas. [5 Steps to CSS Heaven]
  • Organize your CSS-styles, ordering properties alphabetically. “I don’t know where I got the idea, but I have been alphabetizing my CSS properties for months now, and believe it or not, it makes specific properties much easier to find.” [Christian Montoya]
  1. body {
  2. background:#fdfdfd;
  3. color:#333;
  4. font-size:1em;
  5. line-height:1.4;
  6. margin:0;
  7. padding:0;
  8. }
  • Separate code into blocks.. “This might be common sense to some of you but sometimes I look at CSS and it’s not broken down into “sections.” It’s easy to do an it makes working with code weeks, months, or years later much easier. You’ll have an easier time finding classes and elements that you need to change. Examples: /* Structure */, /* Typography */ etc.” [CSS Tips and Tricks]
  • Hook, line, and sinker. Once you have your CSS and sections in place start considering where your selector “hooks” will live by using structural hooks in your mark up. This is your saving grace for future editing and maintenance of the site. This will also give you strength in your document.” [Ryan Parr]
  • Break your style sheet in separate blocks. “I break down my style sheet into three separate blocks. The first is straight element declarations. Change the body, some links styles, some header styles, reset margins and padding on forms, and so on. […] After element declarations, I have my class declarations; things like classes for an error message or a callout would go here. [..] I start by declaring my main containers and then any styles for elements within those containers are indented. At a quick glance, I can see how my page is broken down and makes it easier to know where to look for things. I’ll also declare containers even if they don’t have any rules.” [Jonathan Snook]

1.3. Workflow: Handling IDs, Classes, Selectors, Properties

  • Keep containers to a minimum. “Save your document from structural bloat. New developers will use many div’s similar to table cells to achieve layout. Take advantage of the many structural elements to achieve layout. Do not add more div’s. Consider all options before adding additional wrappers (div’s) to achieve an effect when using a little nifty CSS can get you that same desired effect.” [Ryan Parr]
  • Keep properties to a minimum. “Work smarter, not harder with CSS. Under this rule, there are a number of subrules: if there isn’t a point to adding a CSS property, don’t add it; if you’re not sure why you’re adding a CSS property, don’t add; and if you feel like you’ve added the same property in lots of places, figure out how to add it in only one place.” [CSSing]
  • Keep selectors to a minimum. “Avoid unnecessary selectors. Using less selectors will mean less selectors will be needed to override any particular style — that means it’s easier to troubleshoot.” [Jonathan Snook]
  • Keep CSS hacks to a minimum. “Don’t use hacks unless its a known and documented bug. This is an important point as I too often see hacks employed to fix things that aren’t really broken in the first place. If you find that you are looking for a hack to fix a certain issue in your design then first do some research (Google is your friend here) and try to identify the issue you are having problems with. [10 Quick Tips for an easier CSS life]
  • Use CSS Constants for faster development. “The concept of constants – fixed values that can be used through your code [is useful]. [..] One way to get round the lack of constants in CSS is to create some definitions at the top of your CSS file in comments, to define ‘constants’. A common use for this is to create a ‘color glossary’. This means that you have a quick reference to the colors used in the site to avoid using alternates by mistake and, if you need to change the colors, you have a quick list to go down and do a search and replace.” [Rachel Andrew]
  1. # /*
  2. # Dark grey (text): #333333
  3. # Dark Blue (headings, links) #000066
  4. # Mid Blue (header) #333399
  5. # Light blue (top navigation) #CCCCFF
  6. # Mid grey: #666666
  7. # */
  • Use a common naming system. Having a naming system for id’s and classes saves you a lot of time when looking for bugs, or updating your document. Especially in large CSS documents, things can get a big confusing quickly if your names are all different. I recommend using a parent_child pattern. [10 CSS Tips]
  • Name your classes and IDs properly, according to their semantics. “We want to avoid names that imply presentational aspects. Otherwise, if we name something right-col, it’s entirely possible that the CSS would change and our “right-col” would end up actually being displayed on the left side of our page. That could lead to some confusion in the future, so it’s best that we avoid these types of presentational naming schemes. [Garrett Dimon]
  • Group selectors with common attributes. “Group selectors. When several element types, classes, or id:s share some properties, you can group the selectors to avoid specifying the same properties several times. This will save space – potentially lots of it.” [Roger Johansson]
  • Isolate single properties that you are likely to reuse a lot. “If you find yourself using a single property a lot, isolate it to save yourself repeating it over and over again and also enabling you to change the display of all parts of the site that use it.” [5 Steps to CSS Heaven]
  • Move ids and class naming as far up the document tree as you can. Leverage contextual selectors as much as possible. Don’t be afraid to be verbose in your selectors. Longer selectors can make css documents easier to read while also cutting down the chances of developing class- or divitis. [Chric Casciano]
  • Learn to exploit the cascading nature of CSS. “Say you have two similar boxes on your website with only minor differences - you could write out CSS to style each box, or you could write CSS to style both at the same time, then add extra properties below to make one look different.” [5 Steps to CSS heaven]
  • Use Your Utility Tags: <small>, <em> and <strong>. “Many times you’ll have a section in your design that calls for various typographical weights/looks all on the same line, or very close to each other. drop in random divs and classes because I feel they’re not semantic and defeat the purpose of your nice XHTML everywhere else.” Instead, use semantic tags. [Mike Rundle’s 5 CSS Tips]

1.4. Workflow: Use shorthand notation

  • Shorten hexadecimal colour notation. “In CSS, when you use hexadecimal colour notation and a colour is made up of three pairs of hexadecimal digits, you can write it in a more efficient way by omitting every second digit: #000 is the same as #000000, #369 is the same as #336699 [Roger Johansson]
  • Define pseudo classes for links in the LoVe/HAte-order: Link, Visited, Hover, Active. “To ensure that you see your various link styles, you’re best off putting your styles in the order “link-visited-hover-active”, or “LVHA” for short. If you’re concerned about focus styles, they may go at the end– but wait until you’ve read this explanation before you decide.” [Eric Meyer]
  1. a:link { color: blue; }
  2. a:visited { color: purple; }
  3. a:hover { color: purple; }
  4. a:active { color: red; }
  • Define element’s margin, padding or border in TRouBLed-order: Top, Right, Bottom, Left. “When using shorthand to specify an element’s margin, padding or border, do it clockwise from the top: Top, Right, Bottom, Left.” [Roger Johansson]
  • You can use shorthand properties.
    “Using shorthand for margin, padding and bottom properties can save a lot of space.
  1. CSS:
  2. margin: top right bottom left;
  3. margin:1em 0 2em 0.5em;
  4. (margin-top: 1em; margin-right: 0; margin-bottom: 2em; margin-left: 0.5em;)
  1. CSS:
  2. border:width style color;
  3. border:1px solid #000;
  1. CSS:
  2. background: color image repeat attachment position;
  3. background:#f00 url(background.gif) no-repeat fixed 0 0;
  1. CSS:
  2. font: font-style (italic/normal) font-variant (small-caps) font-weight font-size/line-height font-family;
  3. font: italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

1.5. Workflow: Setting Up Typography

  • To work with EMs like with pxs, set font-size on the body-tag with 62.5%. Default-value of the font-size is 16px; applying the rule, you’ll get one Em standing for roughly ten pixels (16 x 62.5% = 10). “I tend to put a font-size on the body tag with value: 62.5%. This allows you to use EMs to specify sizes while thinking in PX terms, e.g. 1.3em is approximately 1.3px. ” [Jonathan Snook]
  • Use universal character set for encoding. “[..] The answer is to use a single universal character set that’s able to cover most eventualities. Luckily one exists: UTF-8, which is based on Unicode. Unicode is an industry standard that’s designed to enable text and symbols from all languages to be consistently represented and manipulated by computers. UTF- 8 should be included in your web page’s head like this. [20 pro tips]
  1. <meta http-equiv="content-type" content="text/ html;charset=utf-8" />
  • You can change capitalisation using CSS. If you need something written in capitals, such as a headline, rather than rewriting the copy, let CSS do the donkey work. The following code will transform all text with an h1 attribute into all capitals, regardless of format”. [20 pro tips]
  1. h1 {
  2. text-transform: uppercase;
  3. }
  • You can display text in small-caps automatically. The font-variant property is used to display text in a small-caps font, which means that all the lower case letters are converted to uppercase letters, but all the letters in the small-caps font have a smaller font-size compared to the rest of the text.
  1. h1 {
  2. font-variant: small-caps;
  3. }
  • Cover all the bases - define generic font-families. “When we declare a specific font to be used within our design, we are doing so in the hope that the user will have that font installed on their system. If they don’t have the font on their system, then they won’t see it, simple as that. What we need to do is reference fonts that the user will likely have on their machine, such as the ones in the font-family property below. It is important that we finish the list with a generic font type. [Getting into good coding habits]
  1. p {
  2. font-family: Arial, Verdana, Helvetica, sans-serif;
  3. }
  • Use 1.4em - 1.6em for line-height.line-height:1.4” for readable lines, reasonable line-lengths that avoid lines much longer than 10 words, and colors that provide contrast without being too far apart. For example, pure black on pure white is often too strong for bright CRT displays, so I try to go with an off-white (#fafafa is a good one) and a dark gray (#333333, another good one).” [Christian Montoya]
  • Set 100.01% for the html-element. This odd 100.01% value for the font size compensates for several browser bugs. First, setting a default body font size in percent (instead of em) eliminates an IE/Win problem with growing or shrinking fonts out of proportion if they are later set in ems in other elements. Additionally, some versions of Opera will draw a default font-size of 100% too small compared to other browsers. Safari, on the other hand, has a problem with a font-size of 101%. The current “best” suggestion is to use the 100.01% value for this property.” [CSS: Getting into good habits]

1.6. Workflow: Debugging

  • Add borders to identify containers. “Use plenty of test styles like extra borders or background colors when building your documents or debugging layout issues. div { border:1px red dashed; } works like a charm. There are also bookmarklets that apply borders and do other things for you.” You can also use * { border: 1px solid #ff0000; }. [Chric Casciano]. Adding a border to specific elements can help identify overlap and extra white space that might not otherwise be obvious. [CSS Crib Sheet]
  1. * { border: 1px solid #f00; }
  • Check for closed elements first when debugging. “If you ever get frustrated because it seemed like you changed one minor thing, only to have your beautiful holy-grail layout break, it might be because of an unclosed element. [10 CSS Tips]

2.1. Technical Tips: IDs, Classes

  • 1 ID per page, many classes per page. “Check your IDs: Only one element in a document can have a certain value for the id attribute, while any number of elements can share the same class name. [..] Class and id names can only consist of the characters [A-Za-z0-9] and hyphen (-), and they cannot start with a hyphen or a digit (see CSS2 syntax and basic data types).” [Roger Johansson]
  • Element names in selectors are case sensitive. “Remember case sensitivity. When CSS is used with XHTML, element names in selectors are case sensitive. To avoid getting caught by this I recommend always using lowercase for element names in CSS selectors. Values of the class and id attributes are case sensitive in both HTML and XHTML, so avoid mixed case for class and id names.” [Roger Johansson]
  • CSS classes and IDs must be valid. “I.e. beginning with a letter, not a number or an underscore. IDs must be unique. Their names should be generic, describe functionality rather than appearance.” [CSS Best Practices]
  • You can assign multiple class names to a given element. “You can assign multiple class names to an element. This allows you to write several rules that define different properties, and only apply them as needed.” [Roger Johansson]

2.2. Technical Tips: Use the power of selectors

Roger Johansson has written an extremely useful series of articles about CSS 2.1 Selectors. These articles are highly recommended to read - some useful aspects can be found in the list below.

  • You can use child selectors. “A child selector targets an immediate child of a certain element. A child selector consists of two or more selectors separated by a greater than sign, “>”. The parent goes to the left of the “>”, and whitespace is allowed around the combinator. This rule will affect all strong elements that are children of a div element. [Roger Johansson]
  1. div > strong { color:#f00; }
  • You can use adjacent sibling selectors. An adjacent sibling selector is made up of two simple selectors separated by a plus sign, “+”. Whitespace is allowed around the adjacent sibling combinator. The selector matches an element which is the next sibling to the first element. The elements must have the same parent and the first element must immediately precede the second element. [Roger Johansson]
  1. p + p { color:#f00; }
  • You can use attribute selectors. Attribute selectors match elements based on the presence or value of attributes. There are four ways for an attribute selector to match:
  1. [att]
  2. Matches elements that have an att attribute, regardless of its value.
  3. [att=val]
  4. Matches elements that have an att attribute with a value of exactly “val”.
  5. [att~=val]
  6. Matches elements whose att attribute value is a space-separated list that contains “val”. In this case “val” cannot contain spaces.
  7. [att|=val]
  8. Matches elements whose att attribute value is a hyphen-separated list that begins with “val”. The main use for this is to match language subcodes specified by the lang attribute (xml:lang in XHTML), e.g. “en”, “en-us”, “en-gb”, etc.

  • The selector in the following rule matches all p elements that have a title attribute, regardless of which value it has:
  1. p[title] { color:#f00; }
  • The selector matches all div elements that have a class attribute with the value error:
  1. div[class=error] { color:#f00; }
  • Multiple attribute selectors can be used in the same selector. This makes it possible to match against several different attributes for the same element. The following rule would apply to all blockquote elements that have a class attribute whose value is exactly “quote”, and a cite attribute (regardless of its value):
  1. blockquote[class=quote][cite] { color:#f00; }
  • You should use descendant selectors. “Descendant selectors can help you eliminate many class attributes from your markup and make your CSS selectors much more efficient. ” [Roger Johansson]

2.3. Technical Tips: Styling Links

  • Be careful when styling links if you’re using anchors. “If you use a classic anchor in your code (<a name="anchor">) you’ll notice it picks up :hover and :active pseudo-classes. To avoid this, you’ll need to either use id for anchors instead, or style with a slightly more arcane syntax: :link:hover, :link:active” [Dave Shea]
  • Define relationships for links. “The rel attribute is supposed to indicate a semantic link relationship from one resource to another.
  1. a[rel~="nofollow"]::after {
  2. content: "\2620";
  3. color: #933;
  4. font-size: x-small;
  5. }
  6. a[rel~="tag"]::after {
  7. content: url(http://www.technorati.com/favicon.ico);
  8. }
  • “These make use of the attribute selector for space separated lists of values. Any a element with a relationship containing those values will be matched. Links with the nofollow relationship will be followed by a dark red skull and crossbones (?) and those with the tag relationship will be followed by the Technocrati icon.” [Handy CSS]
  • You can mark external links automatically. Many people make use of the non-standard rel="external" relationship to indicate a link to an external site. However, adding that to each and every link is time consuming and and unnecessary. This style rule will place an north east arrow after any link on your site to an external site. [Handy CSS]
  1. a[href^="http://"]:not([href*="smashingmagazine.com"])::after {
  2. content: "\2197";
  3. }
  1. a:focus {
  2. outline: none;
  3. }

2.4. Technical Tips: CSS-Techniques

  • You can specify body tag ID. “In most cases placing an ID in the body tag will allow you manipulate CSS presentational items and markup elements by page by page basis. Not only will you be able to organize your sections you will be able to create multiple CSS presentations without changing your markup from template to template or page to page.” [Ryan Parr, Invasion of Body Switchers]
  • You can create columns with equal heights with CSS. Equal Height Technique: a method to make all columns appear to be the same height. But without the need for faux column style background images. Faux Columns: with background images.
  • You can align vertically with CSS. “Say you have a navigation menu item whose height is assigned 2em. Solution: specify the line height to be the same as the height of the box itself in the CSS. In this instance, the box is 2em high, so we would insert line-height: 2em into the CSS rule and the text now floats in the middle of the box!” [Evolt.org]
  • You can use pseudo-elements and classes to generate content dynamically. Pseudo-classes and pseudo-elements. Pseudo-classes and pseudo-elements can be used to format elements based on information that is not available in the document tree. For example, there is no element that refers to the first line of a paragraph or the first letter of an element’s text content. You can use :first-child, :hover, :active, :focus, :first-line, :first-letter, :before, :after and more.
  • You can set <hr> to separate posts beautifully. “Restyling the horizontal rule (<hr>) with an image can be a beautiful addition to a web page. [CSS: Best Practices]
  • You can use the same navigation (X)HTML-code on every page. “Most websites highlight the navigation item of the user’s location in the website. But it can be a pain as you’ll need to tweak the HTML code behind the navigation for each and every page. So can we have the best of both worlds?” [Ten More CSS Tricks you may not know]
  1. XHTML:
  2. <ul>
  3. <li><a href="#" class="home">Home</a></li>
  4. <li><a href="#" class="about">About us</a></li>
  5. <li><a href="#" class="contact">Contact us</a></li>
  6. </ul>
  • Insert an id into the <body> tag. The id should be representative of where users are in the site and should change when users move to a different site section.
  1. CSS:
  2. #home .home, #about .about, #contact .contact
  3. {
  4. commands for highlighted navigation go here
  5. }
  • You can use margin: 0 auto; to horizontally centre the layout. “To horizontally centre an element with CSS, you need to specify the element’s width and horizontal margins.” [Roger Johansson]
  1. XHTML:
  2. <div id="wrap">
  3. <!-- Your layout goes here -->
  4. </div>
  1. CSS:
  2. #wrap {
  3. width:760px; /* Change this to the width of your layout */
  4. margin:0 auto;
  5. }
  • You can add CSS-styling to RSS-feeds. “You can do a lot more with an XSL stylesheet (turn links into clickable links, etc), but CSS can make your feed look much less scary for the non-technical crowd. [Pete Freitag]
  1. <?xml version="1.0" ?>
  2. <?xml-stylesheet type="text/css" href="http://you.com/rss.css" ?>
  3. ...
  • You can hide CSS from older browsers. “A common way of hiding CSS files from old browsers is to use the @import trick. [Roger Johansson]
  1. @import "main.css";
  • Always declare margin and padding in block-level elements. [10 CSS Tips]
  • Set a width OR margin and padding. “My rule of thumb is, if I set a width, I don’t set margin or padding. Likewise, if I’m setting a margin or padding, I don’t set a width. Dealing with the box model can be such a pain, especially if you’re dealing with percentages. Therefore, I set the width on the containers and then set margin and padding on the elements within them. Everything usually turns out swimmingly.” [Jonathan Snook]
  • Avoid applying padding/borders and a fixed width to an element. “IE5 gets the box model wrong, which really makes a mess of things. There are ways around this, but it’s best to side-step the issue by applying the padding to the parent element instead of the child that gets a fixed-width. [CSS Crib Sheet]
  • Provide print styles. “You can add a print stylesheet in exactly the same way that you would add a regular stylesheet to your page:
  1. <link rel="stylesheet" type="text/css" href="print.css" media="print">
  2. or
  3. <style type="text/css" media="print"> @import url(print.css); </style>
  • This ensures that the CSS will only apply to printed output and not affect how the page looks on screen. With your new printed stylesheet you can ensure you have solid black text on a white background and remove extraneous features to maximise readability. More about CSS-based print-Layouts. [20 pro tips]

2.5. Technical Tips: IE Tweaks

  • You can force IE to apply transparence to PNGs. “In theory, PNG files do support varied levels of transparency; however, an Internet Explorer 6 bug prevents this from working cross-browser.” [CSS Tips, Outer-Court.com]
  1. #regular_logo
  2. {
  3. background:url('test.png'); width:150px; height:55px;
  4. }
  5. /* \ */
  6. * html #regular_logo
  7. {
  8. background:none;
  9. float:left;
  10. width:150px;
  11. filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png', sizingMethod='scale');
  12. }
  13. /* */
  1. #container
  2. {
  3. min-width: 600px;
  4. max-width: 1200px;
  5. width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");
  6. }
  • You can use Conditional Comments for IE. “The safest way of taking care of IE/Win is to use conditional comments. It feels more future-proof than CSS hacks – is to use Microsoft’s proprietary conditional comments. You can use this to give IE/Win a separate stylesheet that contains all the rules that are needed to make it behave properly. ” [Roger Johansson]
  1. <!--[if IE]>
  2. <link rel="stylesheet" type="text/css" href="ie.css" />
  3. <![endif]-->

Workflow: Get Inspired

  • Play, experiment with CSS. “Play. Play with background images. Play with floats.” [Play with positive and negative margins. Play with inheritance and cascading rules. Play. [Chric Casciano]
  • Learn from others. Learn from great sites built by others. Any site’s HTML is easily accessible by viewing a page’s source code. See how others have done things and apply their methods to your own work.
    [20 pro tips]

Sources and Related Posts

728x90

'Developer > CSS & HTML' 카테고리의 다른 글

검색엔진 노출방지 robots.txt & meata tag  (0) 2008.02.04
DOCTYPE 선언  (0) 2007.11.22
텍스트파일 내용을 테이블로 불러오기  (0) 2007.05.27
728x90
1.    트랜잭션 로그 파일을 백업하여 대부분의 활성 가상 로그 파일을 비활성화합니다. 이렇게 하면 나중에 비활성 가상 로그 파일을 제거할 수 있습니다. 이렇게 하려면 다음 Transact-SQL 문과 유사한 Transact-SQL 문을 실행하십시오.
BACKUP LOG <DatabaseName> TO DISK = '<BackupFile>'

참고 이 문에서 <DatabaseName>은 백업할 데이터베이스 이름의 자리 표시자이고, <BackupFile>은 백업 파일의 전체 경로에 대한 자리 표시자입니다.

예를 들어, 다음 Transact-SQL 문을 실행하십시오.
BACKUP LOG TestDB TO DISK='C:\TestDB1.bak'

2.    트랜잭션 로그 파일을 축소합니다. 이렇게 하려면 다음 Transact-SQL 문과 유사한 Transact-SQL 문을 실행하십시오.
DBCC SHRINKFILE (<FileName>, <TargetSize>) WITH NO_INFOMSGS

참고 이 문에서 <FileName>은 트랜잭션 로그 파일 이름의 자리 표시자이고, <TargetSize>는 트랜잭션 로그 파일의 대상 크기에 대한 자리 표시자입니다. 대상 크기는 합리적이어야 합니다. 예를 들어, 두 개의 가상 로그 파일보다 작은 크기로 트랜잭션 로그 파일을 축소할 수는 없습니다.
3.    DBCC SHRINKFILE 문이 트랜잭션 로그 파일을 대상 크기로 축소하지 않을 경우 1단계에서 언급한 BACKUP LOG 문을 실행하여 가상 로그 파일을 추가로 비활성화합니다.
4.    2단계에서 언급한 DBCC SHRINKFILE 문을 실행합니다. 이 작업을 수행하고 나면 트랜잭션 로그 파일이 대상 크기와 비슷해집니다.

ex) DBCC SHRINKFILE (db_Log, 1) WITH NO_INFOMSGS


출처 : http://support.microsoft.com/kb/907511
728x90

'Developer > MS SQL' 카테고리의 다른 글

MS SQL 시스템 저장 프로시저  (0) 2019.01.03
728x90

파이어폭스(Firefox)자바스크립트 디버그(debug) 도구인 파이어버그(Firebug)를 이용한 트레이스(trace) 방법을 소개한다. 파이어버그는 훌륭한 디버깅(debugging) 콘솔(console)을 가지고 있다. 간략하게 콘솔에 대해 설명하자면 메시지를 출력하거나 문자열(string)을 출력하는 일 외에도 DOM(Document Object Modal) 객체(object)를 표시할 때에는 어떠한 형태인지 분석하고 분석가능한 경우 DOM에 할당(registered)된 클리커블(clickable)한 객체 목 록을 표시하한다. 만약 엘리먼트(element)라면 'div#IDName.ClassName'과 같이 엘리먼트가 가진 id값, class값 혹은 action, src등 여러정보를 표시하고 클릭시 파이어버그 HTML트리의 해당 노드로 이동시키는 역할까지 하게된다.

파이어버그의 디버깅 콘솔


위 화면은 파이어 버그의 콘솔을 이용해서 트레이스한 예이다. 자바스크립트 코드를 만들면서 지역변수의 값을 실시간으로 확인하거나 산출물에 대한 결과를 리포트할때 사용하면 효과적이다. 지금부터 파이어버그의 콘솔을 활용하는 방법에 대하여 알아보자.
var debug = function(){
  // check browser has console
  if(typeof console != 'undefined' && typeof console.log != 'undefined'){
    console['info'](arguments); // call Firebug's console
  }

출처 : http://firejune.com/1079
}

간 단하게 디버그 함수를 하나 생성했다. console['info'] 함수에 아규먼트(argument)로 넘긴 값이 파이어버그의 콘솔에 표시된다. 콜솔에 표시되는 메시지의 종류로는 'debug', 'info', 'warn', 'error'가 있다. 이것은 좌측 그림과 같이 메시지의 종류를 시각적으로 표시해준다. debug는 값만을 출력하며, info는 메시지 앞 에 파랑색 'i' 아이콘을 붙게되며, warn은 노랑색 'i'아이콘에 라인이 하늘색으로 강조된다. 그리고 error는 빨간색 'x' 아이콘이 붙고 라인이 연노랑색으로 강조된다. 여기서는 트레이스 구분을 위해 일괄적으로 'info'를 사용했다.

자, 이제 위에서 생성한 debug 함수를 활용해보자.
debug('hello world!');
// -> ["hello world!"]
debug(debug, typeof debug);
// -> [function(), "function"]
debug(document.getElementsByTagName('form'));
// -> [[form custom, form#weblog index.php]]
debug('value1', 'value2', 'value3', 'value4', 'value5');
// -> ["value1", "value2", "value3", "value4", "value5"]

파이어버그의 강력한 콘솔기능을 트레이스로 활용함으로써 조금더 편리한 디버깅환경을 구축할수 있다. 이것은 소스를 분석하거나 조작하는데에도 매우 효과적이다. enjoy it.
728x90
728x90

1/2

Niels Leenheer씨는 HTML 페이지의 로드를 가속화하기 위해 포함하는 자바스크립트 및 스타일시트 파일에 gzip을 사용하여 압축하고  모드리라이트(mod_rewrite) 모듈을 이용하여 자동-전송하는 방법을 자신의 개인 블로그에 소개했다. 좌축의 이미지는 파이어버그(firebug)의 Net 콘솔 화면으로 압축전과 압축후의 로딩속도와 파일용량을 비교한 것이다. 압축률은 1: 0.23~0.25 이며, 자료의 크기는 줄지만 완전히 투과하도록 작동하기 때문에 종전의 소스코드에는 변화를 줄 필요가 없다.

파일의 압축전송은 브라우저가 한정된 수만을 동시에 다운로드하므로 몇몇 파일이 완료될때 까지 기다리는 문제가 발생한다. 이 문제의 해결책은 1개의 큰 파일로 결합하여 전송 대역폭을 줄이는 방법을 제공한다. 예를 들자면 아래와 같다.
분리된 자바스크립트 라이브러리 URL :
http://www.firejune.com/javascripts/prototype.js
http://www.firejune.com/javascripts/builder.js
http://www.firejune.com/javascripts/effects.js
http://www.firejune.com/javascripts/dragdrop.js
http://www.firejune.com/javascripts/slider.js

하나로 결합하기 :
http://www.firejune.com/javascripts/prototype.js,builder.js,effects.js,dragdrop.js,slider.js
그리고 웹서버의 리소스 확보를 위해서 파일들의 요청이 있을때마다 압축하는 작업을 거치지않고 캐시를 사용하도록 설정되어 있다.(끌 수 있음) 설치를 시작하기 전에 우선 아래의 주소에서 소스를 다운로드하고 파일명을 'combine.php'로 저장다.

combine.php 다운로드 : http://rakaz.nl/projects/combine/combine.phps

설정을 위해 다운로드한 파일을 열어 자바스크립트, 스타일시트, 캐시 폴더의 경로를 설정한다. 만약 웹서버에 캐시폴더가 없다면 쓸수있는 권한이 있는 폴더를 생성해야한다. 그리고 웹서버의 루트(root)에 업로드 하자. 두번째로 모드리라이트를 손볼 차례이다. 루트의 .htaccess파일을 열어 아래와같은 내용을 삽입하자. 1번과 2번라인은 이미 설정되어 있다면 무시해도 무방하다. 이 또한 마찬가지로 php에서 설정한 자바스크립트가 있는 폴더와 스타일시트가 있는 폴더이름만 변경하면 된다.
RewriteEngine On
RewriteBase /
RewriteRule ^stylesheets/(.*\.css) /combine.php?type=css&files=$1
RewriteRule ^javascripts/(.*\.js) /combine.php?type=javascript&files=$1

다소 간편한 몇가지의 조작만으로 속도향상을 꾀할수 있었다. 자바스크립트와 스타일스트의 양이 많은 곳이라면 꼭한번 써봄직한 솔루션이다.

출처 : http://firejune.com/1080
728x90
728x90


Anchor | anchors array | Applet | applets array | Area | Array | Button | Checkbox | Date | document | FileUpload | Form | forms array | frames array | Hidden | History | history array | Image | images array | Layers | layers array | Link | links array | location | Math | MimeType | mimeTypes array | navigator | Number | Option | options array | Password | Plugin | plugins array | Radio | radio array | Reset | screen | Select | String | Submit | Text | Textarea | window


※ 녹색은 네스케이프, 혹은 익스플로러 전용으로만 사용되는 객체(속성,메소드)입니다

객체(Object)

속성(Property)

메소드(Method)

이벤트핸들러(Event Handler)

Anchor

name
text
x
y



anchors array

length



Applet


applet's methods


applets array

length



Area

hash
host
gostname
href
pathname
port
protocol
search
target


onClick
onmouseOut
onmouseOver

Array

length

concat
join
pop
push

reverse
shift
slice
sort
unshjft


Button

form
name
type
value

blur
click
focus

onClick
onmouseDown
onmouseUp

Checkbox

checked
defaultChecked
form
name
type
value

blur
click
focus

onClick
onmouseDown
onmouseUp

Date


getDate
getDay
getFullYear
getHours
getMilliseconds
getMinutes
getMonth
getSeconds
getTime
getTimezoneOffset
getUTCDate
getUTCDay
getUTCFullYear
getUTCHours
getUTCMilliseconds
getUTCMinutes
getUTCMonth
getUTCSeconds
getYear
parse
setDate
setFullYear
setHours
setMilliseconds
setMinutes
setMonth
setSeconds
setTime
setUTCDate
setUTCHours
setUTCMilliseconds
setUTCMinutes
setUTCMonth
setUTCSeconds
setYear
goGMTString
toLocaleString
toString
toUTCString
UTC
valueOf


document

activeElement
alinkColor
all
Anchor
anchors
Applet
applets
Area
bgColor
body
charset
children

cookie
defaultCharset
domain
embed
embeds
expando

fgColor
Form
forms
Image
images

lastModified
Layer
layers

linkColor
Link
links
location
parentWindow
plugins

readyState
referrer
scripts
selection
styleSheets

title
URL
vlinkColor

clear
close
createElement
createStylesheet
elementFromPoint
getSelection

open
write
writeIn


FileUpload

form
name
type
value

blur
focus

select

onBlur
onFocus
onSelect

Form

action
Button
Checkbox
elements
encoding
FileUpload
Hidden
length
method
name
Password
Radio
Reset
Select
Submit
target
Text
Textarea

reset
submit

onReset
onSubmit

forms array

length



frames array

length



Hidden

form
name
type
value



History

current
length
next
previous

back
foward
go


history array

length



Image

border
complete
height
hspace
lowsrc
name
src
vspace
width
x
y


onAbort
onError
onLoad

images array

length



Layers

above
background
below
bgColor
clip
document
hidden
left
name
pageX
pageY
parentLayer
siblingAbove
siblingBelow
src
top
visibility
window
x
y
zindex

load
moveAbove
moveBelow
moveBy
moveTo
moveToAbsolute
resizeBy
resizeTo

onBlur
onFocus
onmouseOut
onmouseOver
onmouseUp

layers array

length



Link

hash
host
hostname
href
pathname
port
protocol
search
target
text
x
y


onClick
onmouseOut
onmouseOver

links array

length



location

hash
host
hostname
href
pathname
port
protocol
search

reload
replace


Math

E
LN2
LN10
LOG2E
LOG10E
PI
SQRT1_2
SQRT2

abs
acos
asin
atan
atan2
ceil
cos
exp
floor
log
max
min
pow
random
round
sin
sqrt
tan


MimeType

description
enabledPlugin
suffixes
type



mimeTypes array

length



navigator

appCodeName
appMinorVersion
appName
appVersion
browserLanguage
cookieEnabled
cpuClass
languages
mimeTypes

platform
plugins
systemLanguage

userAgent
userLanguage
userProfile

javaEnabled
preference
savePreferences
taintEnabled


Number

MAX_VALUE
MIN_VALUE
NaN
NEGATIVE_INFINITY
POSITIVE_INFINITY

toString
valueOf


Option

defaultSelected
index
selected
selectedIndex
text
value



options array

length



Password

defaultValue
form
name
type
value

blur
focus
select

onBlur
onChange
onFocus
onKeydown
onKeypress
onKeyup
onSelect

Plugin

description
filename
name

refresh


plugins array

length



Radio

checked
defaultChecked
form
name
type
value

blur
click
focus

onClick
onmouseDown
onmouseUp

radio array

length



Reset

form
name
type
value

blur
click
focus

onClick
onmouseDown
onmouseUp

screen

availHeight
availLeft
availTop

availWidth
BufferDepth
colorDepth
height
pixelDepth
updayeInterval
width



Select

form
length
name
options
selectedIndex
type

blur
focus

onChange

String

length

anchor
big
blink
bold
charAt
charCodeAt
concat
fixed
fontcolor
fontsize
formCharCode
indexOf
italics
lastIndexOf
link
match
replace
search
slice
small
split
strike
sub
substr
substring
sup
toLowerCase
toUpperCase


Submit

form
name
type
value

blur
click
focus

onClick
onMouseDown
onMouseUp

Text

defaultValue
form
name
type
value

blur
click
focus
select

onBlur
onChange
onFocus
onKeydown
onKeyup
onSelect

Textarea

defaultValue
form
name
type
value

blur
click
focus
select

onBlur
onChange
onFocus
onKeydown
onKeyup
onSelect

window

clientInformation
closed

defaultStatus
dialogArguments
dialogHeight
dialogLeft
dialogLeft
dialogTop
dialogWidth

document
event
frames
history
innerHeight
innerWidth

length
location
locationbar
menubar

name
navigator
offscreenBuffering
opener
outerHeight
outerWidth
pageXOffset
pageYOffset

parent
personalbar
screen
screenX
screenY
scrollbars

self
status
statusbar

toolbar
top

alert
back
blur

close
confirm
find
focus
forward
home
moveBy
moveTo
navigate

open
print
prompt
resizeBy
resizeTo

scroll
scrollBy
scrollTo
stop

onBlur
onError
onFocus

onLoad
onResize
onUnload



728x90
728x90

문서 내 모든 링크의 아래 점선 없애기
728x90

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

JavaScript Object Table  (0) 2007.05.03
윈도우 크기에 따라 글자크기 변경  (0) 2007.05.03
페이지 직접생성 팝업  (0) 2007.05.03
728x90
<script language="javascript">
function fnFontScale (windowWidth, fontSize, fontUnit) {
 if (typeof oFont == 'undefined'){
  oFont = new Object;
  oFont.windowWidth = parseInt(windowWidth);
  oFont.fontSize = parseInt(fontSize);
  oFont.fontUnit = fontUnit;
 }
 var screenWidth = document.body.offsetWidth;
 var scaledFont = oFont.fontSize * (screenWidth / oFont.windowWidth);
 document.body.style.fontSize = scaledFont + oFont.fontUnit;
}
window.onresize = fnFontScale;
</script>
728x90

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

문서 내 모든 링크의 아래 점선 없애기  (0) 2007.05.03
페이지 직접생성 팝업  (0) 2007.05.03
자바스트립트 객체  (0) 2007.05.02
728x90
<script language="javascript">
function winOpen() {
 wobj = window.open('','','width=412,height=270');
 wobj.document.open();
 wobj.document.write('<html><head><title>Test Open Window</title></head><body style="margin:0"><img src="image/img_tmp.gif"></body></html>');
 wobj.document.close();
}
</script>
728x90
728x90
자바스트립트 객체

ㆍ설명

▶ 객체(object)란?
자바스크립트에서 객체란 브라우저창,이미지,입력양식등...웹문서속의 각각의 모든
항목들을 말한다고 보면 되겠습니다

▶ 속성이란?
각 객체가 지닌 특성을 말합니다.
사용법 : 객체명.속성="속성값";
예) window.status="반가워여"; --> 브라우저 상태바에 반가워여라는 글자를 보입니다.

▶ 메서드란?
각 객체에게 어떤 동작을하도록하는 명령어라고보면 됩니다.
예를들어 window객체의 close라는 메서드는 브라우저창에게 창을닫도록 명령합니다.
사용법 : 객체명.메서드(인자값);
예) window.alert("경고한다.밥무라"); --> 경고한다.밥무라라는 메세지로경고창을띄웁니다

▶ 자바스크립트와 DHTML
객 체의 메서드나 속성중에서 근래에는 잘쓰여지지 않는 것들도 있습니다, style을 이용한 다이나믹html이 대체되어 쓰이는 경우가 많이 있습니다. 예로 문서의 배경 색깔을 동적으로 변경시키고자 할때 예전에는 document.bgColor = "#ff00ff"; 이렇게 썼으나 요즘은 document.body.style.background = "#ff00ff"; 로 쓰는경우도 많이 볼 수 있습니다.


window 객체의 속성과 메서드

속성
closed - 브라우저 창이 닫혔는지를 체크
opener - 현재창이 새창일경우 현재창을열개한 브라우저창
status - 브라우저의 상태표시줄의 정보
screenLeft - 윈도우화면 좌측상단모서리에서 브라우저 상단까지의 x축 거리
screenTop - 윈도우화면 좌측상단모서리에서 브라우저 상단까지의 y축 거리


메서드
alert - 경고창을 띄운다
blur - 현재창을 최소화한다.포커스를 잃게 한다
focus - 현재창에 포커스를 준다,활성화 시킨다.
moveTo(x,y) - x,y좌표로 브라우저를 이동시킨다
moveBy(dx,dy) - 현재위치에서 dx,dy만큼 창을 이동
resizeTo(w,h) - 브라우저창 크기를 w(폭),h(높이)로 변경한다
resizeBy(dx,dy) - 브라우저창 크기를 dx,dy만큼 변경한다
open - 새창을 연다
close - 브라우저를 닫는다
print - 문서를 인쇄한다
setTimeout - 특정시간후에 특정작업을 호출합니다
clearTimeout - setTimeout으로 설정한 Timer를 해제합니다


document 객체의 속성과 메서드

속성
title - 문서의 제목
lastModified - 마지막으로 수정된 날짜
bgColor - 문서의 배경색
fgColor - 문서의 글자색
linkColor - 링크의 색상
alinkColor - 링크 클릭시의 색상
vlinkColor - 방문했던 링크의 색상
forms - 문서에 여러개의 폼이 있을경우 각폼들은 폼이름대신 document.forms[index]으로 접근할수있습니다. index는 0부터시작합니다.
links - 문서에서의 a href태그들의 정보를 가진 콜렉션
images - 문서에서의 모든 img태그들의 정보를 가짐
applets - 문서에서 여러개의 자바애플릿을 사용했을경우 모든애플릿들의 콜렉션
embeds - 문서에서 embed태그의 콜렉션


메서드
write - 문서에 내용쓰기
writeln - 문서에 줄바꿈을 포함한 내용쓰기


screen 객체의 속성

속성
width - 시스템 스크린의 폭(픽셀)
height - 시스템 스크린의 높이(픽셀)
availWidth - 시스템 스크린중 브라우저의 문서영역 폭
availHeight - 시스템 스크린중 브라우저의 문서영역 높이


navigator 객체의 속성과 메서드

속성
userAgent - 브라우저 전체정보
ex) Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)
appCodeName - 브라우저 CodeName
ex) Mozilla
appVersion - 브라우저 Version
ex) 4.0 (compatible; MSIE 6.0; Windows NT 5.0)
appName - 브라우저 이름
ex)Microsoft Internet Explorer
cookieEnabled - 브라우저 쿠키이용 가능여부
반환값 : true/false


메서드
javaEnabled - 브라우저의 자바이용가능여부
반환값 : true/false


history 객체의 속성과 메서드

속성
length history - 목록(방문한사이트목록)의 개수


메서드
go(숫자) - 지정숫자만큼 사이트이동 ex) go(2) 앞으로 2번째로 이동
back - 현재사이트 기준에서 이전사이트로 이동
forward - 현재사이트 기준에서 다음사이트로 이동


Event 객체의 속성

속성
keyCode - 이벤트를 일으킨 키보드의 키코드값
altKey - altKey를 눌렀는지의 여부
ctrlKey - ctrlKey를 눌렀는지의 여부
shiftKey - shiftKey를 눌렀는지의 여부
button - 마우스 오른쪽버튼을 눌렀는지 왼쪽버튼을 눌렀는지의 여부
clientX - 마우스 클릭시 브라우저기준의 x축거리
clientY - 마우스 클릭시 브라우저기준의 y축거리
srcElement - 이벤트가 일어난 엘리먼트


Form 객체의 속성

input type="text" - 각값은 document.form이름.엘리먼트이름.value 로 접근할수 있다
input type="password"
input type="checkbox" - 어떤 값이 선택되었는지는 루프를 돌며 checked속성이 true인지 false인지로 체크할 수 있다
input type="radio"
input type="file" - 파일업로드를 위한 객체로서 파일값이 변할때 onChange이벤트 핸들러를 사용한다
input type="button" - submit이나 reset버튼의 제한된 기능에 다른여러기능을 추가적으로 스크립트로 제어할 때는 input type="button"을 쓰고 onClick이벤트 핸들러를 사용한다
input type="submit" - 폼을 전송한다
input type="reset" - 폼을 초기상태로 reset한다
select - 선택값은 document.forms이름.엘리먼트이름.value로접근할 수 있습니다


속성
disabled - 버튼이나 셀렉트박스등을 클릭 선택하지 못하게 합니다
readonly - 텍스트 박스의 내용을 읽기 전용으로 합니다


Date 객체의 메서드

▶ 특징
다 른 객체와 달리 new연산자와 생성자 함수 Date()를 사용해서 객체인스턴스를 생성한후 그메서드들을 이용할수있다. 사실 생성자함수에는 몇가지유형 인자를 가지는 유형이 있으나 인자없는 단순한 Date(); 함수만으로도 충분하다 ..다른 인자를 가지는 생성자들까지 공부할려면 이야기주제는 자바스크립트라기보다 자바에 가까와 질듯하다...

메서드
getTime - 1970년 1월1일 오전0시0분0초로 부터 현재까지의 시간을 m초로 반환한다
getYear - 현재의 년도를 반환한다
getMonth - 현재의 월을 반환한다 (1월:0 2월:1...)
getDate - 날짜(1~31)를 반환한다
getHours - 현재의 시간을 반환한다 (5시 --> 17)
getMinutes - 현재의 분을 반환한다
getSeconds - 현재의 초를 반환한다
getDay - 요일(0:일요일 1:월요일)에 대한 숫자를 반환한다
 
728x90

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

페이지 직접생성 팝업  (0) 2007.05.03
문자열(value)이 한글인지 아닌지를 체크  (0) 2007.05.02
SELECT Element간 ITEM이동  (0) 2007.05.02
728x90
function isKor(value) {
  if(value.length < 1 || value.length > 6) {
    return false;
  }

  for(var i = 0; i < value.length; i++) {
    var chr = value.substr(i,1);
    chr = escape(chr);
    if (chr.charAt(1) == "u") {
      chr = chr.substr(2, (chr.length - 1));
      if((chr < "AC00") || (chr > "D7A3")) {
        return false;
      }
    } else {
      return false;
    }
  } 
  return true;
}
728x90

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

자바스트립트 객체  (0) 2007.05.02
SELECT Element간 ITEM이동  (0) 2007.05.02
HTML에서의 progress bar Loading표현  (0) 2007.05.02
728x90

/*

 * function Name:

 *     ListData_chk

 *

 * Description:

 *     두 SELECT Element (dblist_all & dblist_dir)의 item을 교환할 수 있는 스크립트

 * Parameter:

 *     mode: add와 del을 주어서 두 SELECT Element간의 이동 방향을 명시함.

 *         add: ←로 데이터 이동

 *         del: →로 데이터 이동

 *

 * Event:

 *     onClick = "ListData_chk('add')" & onClick = "ListData_chk('del')"

 *

 * Useful:

 *     리스트박스(SELECT Element)는 2개이며 둘 다 다중선택(multiple)을 지원한다.

 *     따라서 HTML소스는 다음의 형태를 취한다.

 *     <tr>

 *        <td><select name="dblist_all" size="10" multiple>...</select></td>

 *        <td><a href=# onClick = "ListData_chk('add')">←</a><br>

 *        <a href=# onClick = "ListData_chk('del')">→</a></td>

 *        <td><select name="dblist_dir" size="10" multiple>...</select></td>

 *     </tr>

 *

 * Bug report:

 *     2005.08.30:

 *         새로운 노드의 생성까지 만들어놓았으나 현재 병합하지 않음.

 *         (블로그 포스트 http://blog.naver.com/jujac/20015976816 참고)

 */


function ListData_chk(mode) {
 var total = MM_findObj('lbl_totaldb_all');
 var aryTempSourceOptions = new Array();
 var aryTempRecOptions = new Array();
 var x=0, y=0;

 if(mode=="add") {
  var odb = document.oform2['dblist_all'];
  var viewdb = document.oform2['dblist_dir'];
 } else {
  var odb = document.oform2['dblist_dir'];
  var viewdb = document.oform2['dblist_all'];
 }

 if(odb.selectedIndex == -1) {
  alert("DB를 선택하지 않았습니다.");
  return false;
 }

 for(var i = 0; i < odb.length; i++) {
  var objTargetValues = new Object();
  objTargetValues.text = odb.options[i].text;
  objTargetValues.value = odb.options[i].value;

  if(odb.options[i].selected) {
   aryTempSourceOptions[x++] = objTargetValues;
  } else {
   aryTempRecOptions[y++] = objTargetValues;
  }
 }

 if(x) {
  if(viewdb.length) vsize = (viewdb.options[0].text)? viewdb.length : 0;
  else vsize = viewdb.length;

  asize = aryTempSourceOptions.length;
  viewdb.length = vsize + aryTempSourceOptions.length;
  for (var i=0; i<vsize; i++) {
   viewdb.options[i].selected = false;
  }
  for (var i=vsize, j=0; i<viewdb.length; i++, j++) {
   viewdb.options[i].text = aryTempSourceOptions[j].text;
   viewdb.options[i].value = aryTempSourceOptions[j].value;
   viewdb.options[i].selected = false;
  }

  odb.length = aryTempRecOptions.length;
  for (var i = 0; i  <odb.length; i++) {
   odb.options[i].text = aryTempRecOptions[i].text;
   odb.options[i].value = aryTempRecOptions[i].value;
   odb.options[i].selected = false;
  }

  total.innerHTML = "Total: " + viewdb.length;
 }
 viewdb.options[viewdb.length-1].selected = true;
}

728x90

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

문자열(value)이 한글인지 아닌지를 체크  (0) 2007.05.02
HTML에서의 progress bar Loading표현  (0) 2007.05.02
이메일 주소 검증  (0) 2007.05.02
728x90

<!---- Progress Bar ---->

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>::Libmeta - Searching...</title>

<script language='javascript'>
<!--

var maxLength = 400;

/*

 * 문서내의 progressBar란 객체를 초기화하여 증가를 준비한다.

 * 그리고 progressBar객체를 (parameter t의 값*10)만큼의 시간동안 주기적으로

 * growUp()함수를 실행한다.

 */

function execute(t) {
    totalTime = t*10;
    barSize=0;
    document.all.progressBar.style.border = '1 solid black';
    document.all.progressBar.style.height = '8';
    moveNow = setInterval("growUp()",totalTime);
}

/*

 * 문서내의 progressBar객체를 너비 +10씩 최종 maxLength에 지정한 길이까지 증가시킨다.

 */

function growUp() {
    barSize += eval(10);
    document.all.progressBar.style.width = barSize;
    if(barSize >= maxLength) {
        clearInterval(moveNow);
    }
}

//-->
</script>
</head>


<!-- 보기좋으라고 걍 margin을 없앰 -->

<body style="margin:0;" onLoad="execute(10);">
<table width=700 height=80%>
<tr>
 <td
align=center valign=middle>
<!-- 이곳의 Table너비를 maxLength와 맞춰준다. -->

 <table cellpadding=0 cellspacing=0 width=400>
  <td><div align=center style="font:9pt dotum; color:dodgerblue;">검색중입니다...</div><br>
<!-- progress bar object -->

  <div id="progressBar" style="height:10; border:0; width:0; background-color:#FFEF9F;"><img src="" height=2 width=0></div></td>
 </tr>
</table></td>
</tr>
</table>

</body>
</html>

<!------------------------------------------------------------------

시간 t에 따른 로딩을 표시하기 위한 예제인데..

사실 실제 데이터와의 실시간적 매칭이 아닌 눈가림용이란걸 알수 있다.ㅋㅋ

다른응용도 가능할 것이며.. setInterval의 예제로 생각해도 좋을 듯..?

------------------------------------------------------------------->

728x90

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

SELECT Element간 ITEM이동  (0) 2007.05.02
이메일 주소 검증  (0) 2007.05.02
How to use multiple window.onload events with external scripts  (0) 2007.05.02
728x90
function checkEmail(strEmail) {
    var arrMatch = strEmail.match(/^(\".*\"|[A-Za-z0-9_-]([A-Za-z0-9_-]|[\+\.])*)@(\[\d{1,3}(\.\d{1,3}){3}]|[A-Za-z0-9][A-Za-z0-9_-]*(\.[A-Za-z0-9][A-Za-z0-9_-]*)+)$/);
    if (arrMatch == null) {
        return false;
    }

 

    var arrIP = arrMatch[2].match(/^\[(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})\]$/);
    if (arrIP != null) {
        for (var i = 1; i <= 4; i++) {
            if (arrIP[i] > 255) {
                return false;
            }
        }
    }
    return true;
}
728x90
728x90
How to use multiple window.onload events with external scripts
faq216-4862
Posted: 19 Feb 04 (Edited 20 Sep 05)

Scripts probably conflict most often when using the onLoad event. Have you ever used code like this?

window.onload=myInitFunction;

This is fine if you're sure myInitFunction() will be the only function that needs to be called when the page is loaded. But how can you know for sure? What if a page that calls your script has code in its <BODY onload="..."> ? What if there's another external script on the page that also assigns a function to the onload event? The code above will overwrite what was there with your code and that's not good.

Use the function below to add your function without replacing what is already in the onLoad.

CODE

function addOnloadEvent(fnc){
  if ( typeof window.addEventListener != "undefined" )
    window.addEventListener( "load", fnc, false );
  else if ( typeof window.attachEvent != "undefined" ) {
    window.attachEvent( "onload", fnc );
  }
  else {
    if ( window.onload != null ) {
      var oldOnload = window.onload;
      window.onload = function ( e ) {
        oldOnload( e );
        window[fnc]();
      };
    }
    else
      window.onload = fnc;
  }
}

Example:

CODE

addOnloadEvent(myFunctionName);

// Or to pass arguments

addOnloadEvent(function(){ myFunctionName('myArgument') });
728x90

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

이메일 주소 검증  (0) 2007.05.02
javascript cookie  (0) 2007.05.02
문자열이 ASCII 코드로만 이루어졌는지 체크하는 함수  (0) 2007.04.26
728x90

<script language="JavaScript">

function set ()
{
    var expdate = new Date();
    expdate.setMonth(expdate.getMonth()+6);
   alert("setting cookie \""+form1.txtName.value+"\" to \""+form1.txtValue.value+"\"");
    setCookie(form1.txtName.value, form1.txtValue.value, expdate);
}


function get ()
{
   alert("getting cookie \""+form1.txtName.value+"\"");
    var c = getCookie(form1.txtName.value);
    alert( "cookie = "+c );

    form1.txtValue.value = c;
}


function getCookie (sCookieName)
{
    var sName=sCookieName+"=", ichSt, ichEnd;
    var sCookie=document.cookie;

    if ( sCookie.length && ( -1 != (ichSt = sCookie.indexOf(sName)) ) )
    {
        if (-1 == ( ichEnd = sCookie.indexOf(";",ichSt+sName.length) ) )
            ichEnd = sCookie.length;
        return unescape(sCookie.substring(ichSt+sName.length,ichEnd));
    }
   
    return null;
}
  
function setCookie (sName, vValue)
{
    var argv = setCookie.arguments, argc = setCookie.arguments.length;
    var sExpDate = (argc > 2) ? "; expires="+argv[2].toGMTString() : "";
    var sPath = (argc > 3) ? "; path="+argv[3] : "";
    var sDomain = (argc > 4) ? "; domain="+argv[4] : "";
    var sSecure = (argc > 5) && argv[5] ? "; secure" : "";
    document.cookie = sName + "=" + escape(vValue,0) + sExpDate + sPath + sDomain + sSecure + ";";
}
   
function deleteCookie (sName)
{
    document.cookie = sName + "=" + getCookie(sName) + "; expires=" + (new Date()).toGMTString() + ";";
}

728x90
728x90
function isASCII($str)
{
    if( preg_match('/^[\\x{00}-\\x{7F}]+$/u', $str) ){
       return true;
    }else{
       return false;
    }
}



표현식중 뒤에 나오는 패턴 변경자 u 는 패턴 문자열을 UTF-8으로 취급한다.
아래 보다 자세한 패턴 변경자를 참고!!

ASCII CODE TABLE 참고

바이너리 제로 문자(0x00)는 목표 문자열에서는 지원하지만, 패턴 문자열에서는 허용하지 않습니다. 패턴은 제로로 종료하는 보통의 C 문자열로 처리하기 때문입니다. 패턴에서 바이너리 제로를 표현하기 위해서는 이스케이프 시퀀스 "\\x00"로 사용할 수 있습니다.



패턴 변경자(Pattern Modifiers)

패턴 변경자 -- 정규표현식 패턴에 존재하는 변경자의 설명

Description

아래 목록은 현재 존재하는 PCRE 변경자입니다.
괄호 안의 이름은 각 변경자에 대한 PCRE 내부의 이름입니다.

i (PCRE_CASELESS)

이 변경자를 지정하면, 패턴의 문자는 대문자와 소문자를 구별하지 않습니다.

m (PCRE_MULTILINE)

기본적으로, PCRE는 주어진 문자열을 하나의 "줄"로 취급합니다. (실제로 몇개의 라인을 가지더라도) "줄 시작" 메타문자(^)는 문자열의 처음만을 인식하며, "줄 끝" 메타문자($)는 문자열의 끝이나 (D 변경자가 지정되지 않는 한) 마지막 뉴라인의 직전만을 인식합니다. 이는 펄과 같습니다.

이 변경자를 지정하면, "줄 시작"과 "줄 끝"은 주어진 문자열의 모든 뉴라인 직후와 직전을 인식합니다. respectively, as well as at the very start and end. 이는 펄의 /m 변경자와 동일합니다. 주어진 문자열에 "\n" 문자가 존재하지 않거나 ^나 $ 패턴이 일어나지 않으면 이 변경자는 아무런 효과가 없습니다.

s (PCRE_DOTALL)

이 변경자가 지정되면, 패턴의 점 메타문자는 뉴라인을 포함하는 모든 문자를 인식합니다. 지정하지 않으면, 뉴라인은 제외됩니다. 이 변경자는 펄의 /s 변경자와 동일합니다. [^a]와 같은 부정클래스는 이 변경자에 관계 없이 항상 뉴라인 문자를 포함합니다.

x (PCRE_EXTENDED)

이 변경자가 지정되면, 공백 문자는 이스케이프 되거나 문자 클래스 안에 있을 경우를 제외하고, 완전히 무시합니다. 문자 클래스 밖에서 이스케이프 되지 않은 # 사이와 뉴라인 문자 다음의 문자도 무시합니다. 이는 펄의 /x 변경자와 같고, 복잡한 패턴 안에 코멘트를 사용할 수 있게 합니다. 그러나 이는 데이터 문자에만 해당하는 점에 주의하십시오. 공백 문자는 패턴의 특별한 문자 시퀀스 안에는 존재할 수 없습니다. 예를 들면, 조건 서브 패턴을 나타내는 (?( 시퀀스에는 나와서는 안됩니다.

e

이 변경자를 지정하면, preg_replace()는 변경할 문자열을 PHP 코드로 처리하고, 그 결과를 검색된 문자열의 이용하여 일반적인 치환을 합니다.

preg_replace()만 이 변경자를 사용합니다; 다른 PCRE 함수는 무시합니다.

참고: 이 변경자는 PHP 3에서는 사용할 수 없습니다.

A (PCRE_ANCHORED)

이 변경자를 지정하면, 패턴을 강제적으로 "고정"합니다. 이는 ("주어진 문자열"에서) 검색된 문자열의 시작에만 매치도록 강제합니다. 패턴 자체에서 특정한 구조를 가지게 하는, 펄에서는 유일한 방법으로 같은 효과를 얻을 수 있습니다.

D (PCRE_DOLLAR_ENDONLY)

이 변경자가 설정되면, 패턴의 달러($) 메타문자는 주어진 문자열의 마지막에만 대응합니다. 이 변경자 없이는, 달러는 마지막 문자가 뉴라인일 경우에는 바로 직전의 문자에도 매칭합니다. (마지막이 아닌 뉴라인은 제외합니다) 이 변경자는 m 변경자가 지정되었을때는 무시됩니다. 펄에는 이 변경자가 존재하지 않습니다.

S

패턴이 여러번 이용되면, 매칭에 걸리는 시간을 절약하기 위해서 분석에 더 많은 시간을 들일 가치가 있습니다. 이 변경자를 지정하면, 추가 분석을 행합니다. 현 시점에서, 패턴의 분석은 하나의 고정된 시작 문자를 가지지 않는 비고정 패턴에만 유용합니다.

U (PCRE_UNGREEDY)

이 변경자는 수량 지시의 "greediness"를 뒤집습니다. 그리하여 기본값으로 not greedy하게 합니다. 하지만 "?"가 붙으면 greedy하게 됩니다. 이는 펄과 호환되지 않습니다. 패턴 안에서 (?U) 변경자 설정으로 지정할 수 있습니다.

X (PCRE_EXTRA)

이 변경자는 펄과 호환되지 않는 PCRE의 추가 기능을 사용하게 합니다. 패턴의 문자와 결합된 백슬래쉬가 특별한 의미를 지니지 않을 경우에 에러를 발생시켜서, 차후에 추가 기능을 위해 예약해둡니다. 기본적으로 펄은, 문자와 결합된 백슬래쉬가 특별한 의미를 지니지 않을 경우에는 글자로 취급합니다. 이 변경자는 다른 기능을 제어하지 않습니다.

u (PCRE_UTF8)

이 변경자는 펄과 호환되지 않는 PCRE의 추가 기능을 사용하게 합니다. 패턴 문자열을 UTF-8으로 취급합니다. 유닉스에서는 PHP 4.1.0부터, win32에서는 PHP 4.2.3부터 사용할 수 있습니다.

728x90

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

javascript cookie  (0) 2007.05.02
자바스크립트 단축키 핸들러 - shortcuts.js  (0) 2007.04.20
Prototype base multi-Selection API  (0) 2007.04.18
728x90
Binny V A씨는 많은 자바스크립트 라이브러리가 있음에도 단축키를 지원하는 라이브러리는 발견하지 못했다면서 구글의 웹 애플리케이션인 Gmail이나 Reader처럼 보다 쉽게 웹 애플리케이션에 단축키를 사용할 수 있도록 함수를 만들어 배포했습니다.

아래의 예제를 보면 첫번째 아규먼트로 키를 지정하고, 두번째로 콜백 함수를 넣습니다. 마지막 세번째에는 옵션을 지정할 수 있습니다. 지원 되는 키에는 "Ctrl+X"와 같은 형식으로 작성하여 매우 직관적이며 Tab, Space, Return, Enter, Backspace, Scroll_lock, Caps_lock, Num_lock, Pause, Insert, Home, Delete, End, Page_up, Page_down, Left, Up, Right, Down, F1, F2, F3, F4, F5, F6, F7, F8, F9, F10, F11, F12 키를 지원합니다.

옵션으로는 'type'에 'keydown','keyup','keypress' 이벤트를 변경할 수 있으며 'target'에 이벤트가 작동할 DOM단위의 영역을 설정할 수 있고 'propagate' 증식옵션(event.stop 또는 return false?)을 Boolean형태로 사용할 수 있습니다.

다운로드 자바스크립트 : shortcuts.js

예제 코드
shortcut("Ctrl+Shift+X",function() {
   alert("Hi there!");
});

shortcut("Ctrl+B",function() {
   alert("The bookmarks of your browser will show up after this alert...");
},{
   'type':'keydown',
   'propagate':true,
   'target':document
});
728x90
728x90
728x90

'Developer' 카테고리의 다른 글

정규표현  (0) 2008.01.29
Online Converters  (0) 2007.04.10
HTTP Status Code  (0) 2007.04.08
728x90
자바스크립트로 구현한 Prototype.js 프레임웍 기반 다중 선택기 API를 소개합니다.(API라고 하기에는 좀 부끄럽군요) 최초 올라로그 오픈베타 프로젝트에 사용되었습니다. 데스크탑 애플리케이션 못지않은 UI를 구현하겠다는 욕심에 조금은 억척 스럽게 만들어진 녀석입니다. 유저가 익숙하지 않다는 이유로 존속여부는 희박하지만, 라이브러리 형태로 공개하고 계속 발전시켜 나가볼 생각입니다. 조금더 다듬고 기능을 확장하여 여러환경에 적용할 수 있도록 손보았습니다. 웹 특성상 컨트롤 키를 조합하는 방식이 아닌 기본으로 활성화 되어 있는 상태입니다.(추가 예정)

download JS : http://firejune.com/javascripts/multiselect.js
download CSS : http://firejune.com/stylesheets/multiselect.css

사용방법


적용대상이 되는 엘리먼트는 리스트 아이템(UL)의 부모이며, 부모 엘리먼트는 다중선택 활성화 영역(parent)이 됩니다. 리스트 아이탬은 고유한 ID값를 지니고 있어야 합니다.(수정됨) 드래그 사용여부와 스타일 시트에서 지정한 스타일을 별도로 설정 할 수도 있습니다, 자세한 사용방법은 아래와 같습니다.(슬라이드 바는 포지션 리셋 테스트용 입니다.)
new MultiSelect('testElement');

// CSS 시각효과 설정
new MultiSelect('testElement', {
  dragSelect: false, // 드래그 사용 여부
  rectangleCN: 'MS-rectangle', // 선택영역 스타일 이름
  selectCN: 'MS-select', // 선택된 아이탬 스타일 이름
  unselectCN: 'MS-unselect', // 선택되지 않은 아이탬 스타일 이름
}});

// 예제에 사용한 코드
var selector = new MultiSelect('testElement', {
  // 변화가 생기면 이벤트 발생
  onChange: function(){
  var debug = $('debug2'), point = '';
  debug .innerHTML = 'Selected : ';
  selector.items.each(function(a){
    if(a.success) {
       debug .innerHTML += point + a.element.innerHTML;
       point = ', ';
    }
  });
}});

selector.setOffset(true); // 포지션 다시 계산하기
selector.selectAll(true); // 모두 선택하기
selector.selectAll(false); // 모두 선택 해제하기


추후 추가될 기능


- 윈도우 컨벤션을 따르는 UI 모드 추가(컨트롤 키 조합)
- 메모리 릭현상 제거
- 더블 클릭 이벤트 추가
- 아이템의 ID값 없이도 사용할 수 있도록 수정(수정됨)
- form 엘리먼트 지원

출처 : FireJune's Blog
728x90
728x90

FormatDateTime(Date[, NamedFormat])

 

date

Required. Date expression to be formatted.

NamedFormat

Optional. Numeric value that indicates the date/time format used. If omitted, vbGeneralDate is used.


vbGeneralDate

0

Display a date and/or time. If there is a date part, display it as a short date. If there is a time part, display it as a long time. If present, both parts are displayed.

vbLongDate

1

Display a date using the long date format specified in your computer's regional settings.

vbShortDate

2

Display a date using the short date format specified in your computer's regional settings.

vbLongTime

3

Display a time using the time format specified in your computer's regional settings.

vbShortTime

4

Display a time using the 24-hour format (hh:mm).


Function GetCurrentDate


' FormatDateTime formats Date in long date.


GetCurrentDate = FormatDateTime(Date, 1)


End Function



Response.Write FormatDateTime(Now, 0) & "<br>" '2005-06-21 오후 2:56:46

Response.Write FormatDateTime(Now, 1) & "<br>" '2005년 6월 21일 화요일
Response.Write FormatDateTime(Now, 2) & "<br>" '2005-06-21
Response.Write FormatDateTime(Now, 3) & "<br>" '오후 2:56:46
Response.Write FormatDateTime(Now, 4) & "<br>" '14:56

728x90

'Developer > ASP (Active Server Page)' 카테고리의 다른 글

asp 내장함수  (0) 2008.08.07
IIS 6.0에서 ASP include file 에러 발생시 대처법  (0) 2007.12.27
FileSystemObject개체  (0) 2007.07.03
728x90
http://www.ejschart.com/index.php

Description: http://ajaxian.com/archives/emprise-jav ··· h-canvas

Jacob Miller and his team have created a rich charting library called EJSChart.

EJSChart is canvas-based with many interactive features such as zooming and auto scaling. The product has been in development for some time but the web site has just been established.

It features interactivity, axis scaling, zooming, scrolling, ajax-driven data, and much more.


728x90
728x90

출처 : http://www.smashingmagazine.com/2007/04/10/online-converters/


Online converters always come in handy. Once you need to perform some operation with your files, they can save your time achieving the same results online, without installing some specific software. In fact, there are many online tools, which convert formats, files and code snippets for free. Some of them are quite specific tools aimed for developers, but some are common “all-rounders”, which manage to convert almost every format to a more popular one. Using them, you can generate .pdf-documents out of images, images out of texts or RSS-feeds out of web-sites. You can also convert any audio- and video-files immediately - the results can be received via e-mail.

So what can you use? What should you use?

This overview of online-converters for users and developers might give you some useful starting points and improve your productivity.

“All-Rounders”

  • Media-Convert
    Media-Convert can deal with many formats. Most important are Text, HTML, XHTML, Microsoft Word, RTF, PDF, PS, Open Office, Star Writer, CSV, dBase, Microsoft Excel, Pocket Excel, Lotus 123, Quattro Pro, Star Calc, Open Office, MathML, Open Office Formeln, Powerpoint. Besides: Video and Audio-formats.
  • txt2tags
    This tool generates HTML, XHTML, SGML, LaTeX, Lout, Man Page, MoinMoin, MagicPoint and PageMaker-documents out of a single plain text-file with minimal markup.
  • Zamzar
    Zamzar supports conversion between a wide variety of different file formats. Many conversion options, among them 11 document formats, 8 image formats, 9 audio formats and 12 video formats.

Development

HTML & CSS

  • Text to JavaScript
    If you’ve ever tried to make some normal text containing characters like ‘ into a JavaScript variable, you will know how frustrating it can be when you miss one, or you miss a \ or a line break or a tag. Well, let this script do it for you.
  • CSS HTML
    Converts CSS-code to HTML and HTML to CSS-Code.
  • HTML2TXT
    Converts HTML in plain text.
  • HTML2Wiki
    Converts HTML to Wiki-Markup
  • HTML -> PHP, JavaScript, ASP
    This program let you convert your HTML in various scripting languages such as: HTML to PHP, HTML to Javascript and HTML to ASP
  • Draac.Com’s Html To Javascript
    Type or paste your Html codes into the text box below, then press the button and convert your Html coding to Javascript.
  • HTML to JavaScript Convertor
    This tool takes your markup and converts it to a series of document.write() statements that you can use in a block of JavaScript.

Graphics

Color

PDF

  • HTML 2 PDF
    Converts HTML and whole sites to PDF
  • Online PDF Converter
    You can generate plain text, .jpg-, .png-, .gif- or .tiff-images out of .pdf-files.
  • PDF Conversion
    PDF -> Text.
  • Show PDF
    PDF -> HTML.
  • PDF Online
    Converts MS Word (DOC), MS Publisher (PUB), MS Word (RTF), MS Excel (XLS), MS PowerPoint (PPT), HTML (MHT), MS PowerPoint (PPS), Text (TXT) and JPG, PNG, BMP, TIFF, WMF, EMF, GIF to PDF online. The .pdf-file is sent via e-mail.

RSS

  • Feed43
    Generates RSS-feeds out of web-sites
  • RSS2GIF
    This tool converts RSS-feeds to images.
  • RSS/RDF
    RSS -> JavaScript.
  • RSSxl
    Converts web-sites to RSS 2.0.

Further converters



728x90

'Developer' 카테고리의 다른 글

정규표현  (0) 2008.01.29
14 Tab-Based Interface Techniques  (0) 2007.04.18
HTTP Status Code  (0) 2007.04.08
728x90

http://www.w3.org/Protocols/rfc2616/rfc2616.html

1. Informational
100 : Continue
101 : Switching Protocols

2. Successful
200 : OK
201 : Created
202 : Accepted
203 : Non-Authoritative Information
204 : No Content
205 : Reset Content
206 : Partial Content

3. Redirection
300 : Multiple Choices
301 : Moved Permanently
302 : Found
303 : See Other
304 : Not Modified
305 : Use Proxy
306 : (Unused)
307 : Temporary Redirect

4. Client Error
400 : Bad Request
401 : Unauthorized
402 : Payment Required
403 : Forbidden(접근권한 제어)
404 : Not Found(파일 없음)
405 : Method Not Allowed
406 : Not Acceptable
407 : Proxy authentication Required
408 : Request Timeout
409 : Conflict
410 : Gone
411 : Length Required
412 : Precondition Failed
413 : Request Entity Too Large
414 : Request URI Too Long
415 : Unsupported Media Type
416 : Requested Range Not Satisfiable
417 : Expectation Failed

5. Server Error
500 : Internal Server Error
501 : Not Implemented
502 : Bad Gateway
503 : Service Unavailable
504 : Gateway Timeout
505 : HTTP Version Not Supported



728x90

'Developer' 카테고리의 다른 글

정규표현  (0) 2008.01.29
14 Tab-Based Interface Techniques  (0) 2007.04.18
Online Converters  (0) 2007.04.10

+ Recent posts