- JavaScript
- 프로그램 문법
- 주석
- 기본 구문
- 오류 처리
- 소스 보기
- ECMAScript Built-In Library
- 내장 객체
- Object
- String
- Number
- Boolean
- Array
- Function
- Date
- Math
- RegExp
- Error
- Module System
- CommonJS (CJS)
- AMD Module
- ES Module (ESM)
- Module System 호환성
- ECMA 3 Browser Support Library
- Event
- Node
- Document
- Element
- HTMLElement
- 입출력
- 브라우저 입출력
- Cookie 입출력
- 객체 생성 방법
- 유용한 라이브러리
- JSON을 String으로 변환
- 데이터 모델
- InnerHTML Model
- Element Model
- Document All Model
- JSDT
- 사용자 정의 라이브러리
- 슬라이드
- 스크롤
- Mouse
- reserved
- getInt(argValue, argDefault)
- getFloat(argValue, argDefault)
- funcGetProcMonth(argStart, argMonth)
- funcFormatInt(argInt)
- Frame에서 화면 중앙 정열
- 관련 자료
- 참고 문헌
JavaScript
프로그램 문법
주석
주석
// 한줄 짜리 주석
/*
여러줄 짜리 주석
*/기본 구문
var : 변수 선언
var 변수 = 변수값;delete : 변수 삭제
delete 변수;typeof : 데이터의 type을 문자열로 반환
Object.prototype.toString.call(변수)를 사용하여 상세한 데이터 타입 구분 가능
typeof 변수
typeof(변수)string : string 형
number : number 형, NaN
boolean : boolean형
object : Object(), Array(), null
function : Function()
undefined : 값이 지정되지 않는 변수, undefined
instanceof : obj가 class의 인스턴스인 경우 true를 반환
obj instanceof classwith
with(obj) {
//--- obj.name 이라는 변수를 여기서는 name 이라는 변수명으로 참조
}if문
if (조건문) {
} else if (조건문) {
} else {
}in : data에 item이 포함되어 있으면 true를 반환
item in data? : 삼항 연산자
조건문이 true이면 참값이 false이면 거짓값이 실행 또는 반환됨
(조건문) ? 참값 : 거짓값
var 변수 = (조건문) ? 참값 : 거짓값switch문
switch (변수) {
case 값1:
break;
default:
break;
}for문
for (var idx = 0; idx < length; idx++) {
//--- continue, break
}
for (var item in data) {
//--- item, data[item](item.md)
}while문
while (조건문) {
//--- continue, break
}do while문
do {
//--- continue, break
} while (조건문);기타 유용한 구문
//--- aa가 true인 값을 가지면 aa를 저장하고, 그렇지 않으면 bb를 저장
var 변수 = aa || bb
//--- aa()가 true인 값을 반환하면 aa()만 실행하고, 그렇지 않으면 bb()도 실행
aa() || bb()
//--- aa()가 false인 값을 반환하면 bb()도 실행하고, 그렇지 않으면 aa()만 실행
aa() && bb()
//--- 변수를 boolean형으로 형변환
!!변수오류 처리
오류 수집
try {
} catch(ex) {
} finally {
}사용자 정의 Exception
function MyException(str)
{
this.str = str
}
throw New MyException("~");소스 보기
view-source:http://~
ECMAScript Built-In Library
기본형
string : 문자형
number : 숫자형
boolean : 논리형
0, 빈 문자열 (""), 수가 아님을 뜻하는 NaN, null, undefined는 모두 false임
내장 상수 및 변수
undefined : null, 변수의 초기값이 없음
NaN : 0, 숫자가 아님
Infinity : 0, 무한한 값
예약어
null : 값이 없음
undefined : 값이 정의되지 않음
this
일반 함수 호출 : this는 전역 객체 (Global)를 참조
브라우저에서 전역 객체는 window 임
객체의 함수 호출 : this는 해당 객체를 참조
생성자 : this는 새로 생성되는 객체를 참조
call(), apply(), bind() : this는 첫번째 인자를 참조
func.call(obj, arg1, arg2); //--- this는 obj를 지정함, obj.func(arg1, arg2)
func.apply(obj, [arg2](arg1,)); //--- this는 obj를 지정함, obj.func(arg1, arg2)
bind(obj, arg1, arg2); //--- 향후 함수 호출시, this는 obj를 지정함- Event Handler : this는 이벤트가 발생한 Element를 참조
- Scope
- var로 변수 선언시 외부에서 참조 불가
- this.변수 형태로 변수 선언시 외부에서 참조 가능 (public 접근 제어자 역할) 예약어 문법
JavaScript 문법 체크를 상세하게 처리
'use strict';debugger : JavaScript Console을 띄워 놓았을 경우, debugger가 기술된 라인부터 debuging 시작
F10 : 라인 단위로 실행
F11 : 함수 호출이 있는 경우, 해당 함수를 라인 단위로 실행
Shift_F11 : 함수를 호출한 라인으로 돌아가서 실행
F8 : 다음 breakpoint까지 실행
~
debugger //--- 이 라인부터 debugging을 시작 합니다.
~내장 함수
eval(string) : 문자열을 JavaScript 코드로서 실행
parseInt(string,radix) : 문자열을 숫자(정수)로 변환
문자열이 0으로 시작하면 8진수로 처리
문자열이 0x로 시작하면 16진수로 처리
parseFloat(string) : 문자열을 숫자(실수)로 변환
문자열이 123e3 이면 123 * 1000 = 123000 으로 처리
isNaN(number) : true. number가 NaN임
isFinite(number) : true. number가 유한한 값
escape(string) : 알파벳 숫자 @ * - _ + . / 외의 문자를 인코딩 (유니코드로 인코딩)
1바이트 문자 인코딩 : %XX
2바이트 문자 인코딩 : %uXXXX
unescape(string) : escape()의 역함수
encodeURI(URI) : escape()에서 URI에 사용되는 문자(: ; / = ? &)는 인코딩하지 않음 (UTF-8로 인코딩)
decodeURI(encodedURI) : encodeURI()의 역함수
encodeURIComponent(uriComponent) : 알파벳과 숫자를 제외한 모든 문자를 인코딩 (UTF-8로 인코딩)
decodeURIComponent(uriComponent) : encodeURIComponent()의 역함수
UTF-8로 인코딩된 parameter을 서버(Java)에서 받는 방법
request.setCharacterEncoding("utf-8");
String name = request.getParameter("name");내장 객체
Object()
String() instanceof Object()
Number() instanceof Object()
Boolean() instanceof Object()
false 인 값 : 0, NaN, '', null, undefined''
Boolean(obj) //--- obj를 Boolean 형으로 변환
!!obj //--- obj를 Boolean 형으로 변환Array() instanceof Object()
Function() instanceof Object()
arguments //--- 전달받은 인자의 배열
func.call(obj, arg1, arg2); //--- this는 obj를 지정함, obj.func(arg1, arg2) 실행
func.apply(obj, [arg2](arg1,)); //--- this는 obj를 지정함, obj.func(arg1, arg2) 실행
bind(obj, arg1, arg2); //--- 향후 함수 호출시, this는 obj를 지정함Date() instanceof Object()
Math() instanceof Object()
RegExp() instanceof Object()
Error(message) instanceof Object()
EvalError() instanceof Error('')''
RangeError() instanceof Error('')''
ReferenceError() instanceof Error('')''
SyntaxError() instanceof Error('')''
TypeError() instanceof Error('')''
URIError() instanceof Error('')''
Object
Object : 모든 변수의 기본이 되는 Class
생성자 : {}, new Object(), Object.consturct()
hasOwnProperty(name)
isPrototypeOf(obj)
propertyIsEnumerable(name)
toLocaleString(), toString()
valueOf()
var remote = new Object();
Object.constructor : 생성자
Object.prototype (객체의 properties)
this
{ name:"value" }, varname["name"]("name".md), varname.nameString
String : Object의 인스턴스
생성자 : '', new String()''
length
fromCharCode(charCode)
charAt(position)
charCodeAt(position) : code = charCodeAt(int);
concat(value)
indexOf(searchString, startPosition)
lastIndexOf(searchString, startPosition)
localeCompare(str)
match(regexp)
replace(regexp, replaceValue)
search(regexp)
slice(start, end)
split(separator, limit)
substring(start, end) : substring(a = 0, 1, ..., b = 자를 길이)
toLocaleLowerCase(), toLowerCase()
toLocaleUpperCase(), toUpperCase()
CharAt(num)
sVal = String.substring(iStart,iEnd);
sVal = String.substr(iStart,iLength);Number
Number : Object의 인스턴스
생성자 : new Number()
MIN_VALUE, MAX_VALUE
NEGATIVE_INFINITY, POSITIVE_INFINITY
NaN
toExponential(fractionDigits)
toFixed(fractionDigits)
toPrecision(fractionDigits)
Boolean
Boolean : Object의 인스턴스
생성자 : new Boolean()
Array
Array : Object의 인스턴스
var theArray = new Array(7), new Array();
var theArray = new Array("a", "b", "c");
array.length
theArray.a, theArray["a"]("a".md)
theArray.push("aaa");
theArray.join(delimiter), reverse(),
[ "value" ], varname[0](0.md)Function
Function : Object의 인스턴스
생성자 : new Function(), function() { }
length
apply(thisObject, argArray)
call(thisObject, args)
function makeArray(n)
{
this.length = n;
var args = makeArray.arguments;
args[0](0.md), args.length
return this;
}Date
Date : Object의 인스턴스
생성자 : new Date(s)
parse(string)
UTC(hour, min, sec, ms)
getDate(), getFullYear(), getMonth(), getDay(), getTimeZoneOffset()
getTime(), getHours(), getMinutes(), getSeconds(), getMilliseconds(),
setDate(date), setFullYear(year, month, date), setMonth(month, date)
setTime(value), setHours(hour, min, sec, ms), setMinutes(min, sec, ms), setSeconds(sec, ms), setMilliseconds(value)
getUTCDate(), getUTCFullYear(), getUTCMonth(), getUTCDay()
getUTCHours(), getUTCMinutes(), getUTCSeconds(), getUTCMilliseconds()
setUTCDate(date), setUTCFullYear(year, month, date), setUTCMonth(month, date)
setUTCHours(hour, min, sec, ms), setUTCMinute(min, sec, ms), setUTCSeconds(sec, ms), setUTCMillseconds(ms)
toDateString(), toLocaleDateString(), toLocaleString()
toTimeString(), toLocaleTimeString()
toUTCString()
valueOf()
var theDate = new Date(), date(yy, mm, dd);
theDate.getYear() + 1900, getMonth() + 1, getDate() + 1, getDay();
theDate.setYear(), setMonth(), setDate(), setDay();
getFullYear();
var today = new Date();
var strToday = today.getYear() + "." + (today.getMonth() + 1) + "." + today.getDate();Math
Math : Object의 인스턴스
생성자 : new Math()
E, LN2, LN10, LOG2E, LOG10E, PI, SQRT2, SQRT1_2
ceil(x) : 올림, floor(x) : 내림, round(x) : 반올림
abs(x) : 절대값
random() : 0 < random() < 1
min(args), max(args)
log(x)
exp(x), pow(x, y), sqrt(x)
sin(x), cos(x), tan(x), asin(x), acos(x), atan(x), atan2(x, y)
abs(~), max(~, ~), min(~, ~)RegExp
[[RegExp]] : Object의 인스턴스
생성자 : RegExp, /~/
source, global, ignoreCase, lastIndex, multiline
exec(string)
test(string)
Error
Error : Object의 인스턴스
생성자 : new Error(message)
name, message
Error(message) instanceof Object()
EvalError() instanceof Error('')''
RangeError() instanceof Error('')''
ReferenceError() instanceof Error('')''
SyntaxError() instanceof Error('')''
TypeError() instanceof Error('')''
URIError() instanceof Error('')''
Module System
CommonJS (CJS)
정적으로 모듈 로드
Browser에서 CJS가 ESM보다 런타임이 2배 빠르다.
//--- In Node.js
vi package.json
"type": "commonjs"
//--- In Server
module.exports = {};
const myModule = require('~');
module.exports.funcA = function() {}
module.exports.funcB = function() {}
const { funcA, funcB } = require('~');
//--- In Browser
//--- AMD(Asynchronous Module Definition) 모듈 시스템
//--- 비동기 방식으로 Browser로 전송하는 모듈
require.define(
"모듈 이름":function(require, exports) {
//--- 기존에 사용하던 모듈
},
[ '먼저 로드할 모듈 이름' ]
);AMD Module
Asynchronous Module Definition
UMD(Universal Module Definition)
CommonJS와 AMD를 동시에 지원하는 모듈 시스템
define(
['underscore', 'jquery', 'exports'],
function(_, $, exports) {
root.Backbone = factory(root, exports, _, $);
}
);
ES Module (ESM)
동적으로 모듈 로드
ESM : ESMAScript Module
ES6 (ES2015)
ES2017 : 95%의 브라우저가 지원 (2023.03)
ES2021 : 70%의 브라우저가 지원 (2023.03)
ESNext : 미출시 버전
//--- In Node.js
vi package.json
"type": "module"
//--- In Server
export myAAA;
export default myDefault;
export * from '~';
//--- 프로그램의 최상단에서만 import 가능
import myDefault, { myAAA } from '~';
import aaa from '~';
aaa.default; //--- myDefault
aaa.myAAA;
//--- 프로그램 중간에서 import 가능
const aaa = await import('~');
const aaa = await import(`~?now=${Date.now()}`);
//--- CommonJS 모듈 로드
const requireModule = createRequire(import.meta.url)
const aaa = requireModule('~');
//--- In Browser
Module System 호환성
ESM에서 CJS 사용
Node
CJS 모듈을 import 가능
Browser
CJS의 함수, 변수 등을 사용 가능
CJS에서 ESM 사용
Node
사용할 수 없습니다.
Browser
ESM의 함수, 변수 등을 사용할 수 없음
ECMA 3 Browser Support Library
start(index)
end(index)
Event instanceof Object
EventListener instanceof Object
EventTarget instanceof Object
Window instanceof EventTarget
Node instanceof EventTarget
CharacterData instanceof Node
Text
:*CDATASectionComment
ProcessingInstruction instanceof Node
Notation instanceof Node
Document instanceof Node
HTMLDocument
DocumentFragment instanceof Node
DocumentType instanceof Node
Entity instanceof Node
EntityReference instanceof Node
Attr instanceof Node
Element instanceof Node
HTMLElement instance Element
:*HTMLAnchorElement
:*HTMLAppletElement
:*HTMLAreaElement
:*HTMLAudioElement :*HTMLBaseElement :*HTMLBaseFontElement :*HTMLBodyElement :*HTMLBRElement :*HTMLButtonElement :*HTMLDirectoryElement :*HTMLDivElement :*HTMLDListElement :*HTMLFieldSetElement :*HTMLFontElement :*HTMLFormElement :*HTMLFrameElement :*HTMLFrameSetElement :*HTMLHeadElement :*HTMLHeadingElement :*HTMLHRElement :*HTMLHtmlElement :*HTMLIFrameElement :*HTMLImageElement ::*Image :*HTMLInputElement :*HTMLIsIndexElement :*HTMLLabelElement :*HTMLLegendElement :*HTMLLIElement :*HTMLLinkElement :*HTMLMapElement :*HTMLMediaElement :*HTMLMenuElement :*HTMLMetaElement :*HTMLModElement :*HTMLObjectElement :*HTMLOListElement :*HTMLOptGroupElement :*HTMLOptionElement :::*Option :*HTMLParagraphElement :*HTMLParamElement :*HTMLPreElement :*HTMLQuoteElement :*HTMLScriptElement :*HTMLSelectElement :*HTMLStyleElement :*HTMLTableCaptionElement :*HTMLTableCellElement :*HTMLTableColElement :*HTMLTableElement :*HTMLTableRowElement :*HTMLTableSelectionElement :*HTMLTextAreaElement :*HTMLTitleElement :*HTMLUListElement :*HTMLVideoElement
NodeList instanceof Object
HTMLCollection instanceof Object
HTMLOptionsCollection instanceof Object
BarProp instanceof Array
Coordinates instanceof Object
CSS2Properties instanceof Object
DOMException instanceof Object
DOMImplementation instanceof Object
Geolocation instanceof Object
History instanceof Object
Location instanceof Object
MediaError instanceof Object
NamedNodeMap instanceof Object
Navigator instanceof Object
Position instanceof Object
PositionError instanceof Object
PositionOptions instanceof Object
Screen instanceof Object
Storage instanceof Object
TimeRanges instanceof Object
WebSocket instanceof Object
XMLHTTPRequest instanceof Object
Event
Event
CAPTURING_PHASE, AT_TARGET, BUBBLING_PHASE
type, target, currentTarget
eventPhase, bubbles, cancelable, timeStamp, stopPropagation, preventDefault
initEvent(eventTypeArg, canBubbleArg, cancelableArg)
preventDefault()
stopPropagation()
EventListener
생성자 : new EventListener()
handleEvent(event)
EventTarget
생성자 : new EventTarget()
dispatchEvent(event)
addEventListener(type, listener, useCapture)
removeEventListener(type, listener, useCapture)
Node
Node instanceof EventTarget
ELEMENT_NODE : 1, ATTRIBUTE_NODE, TEXT_NODE, CDATA_SECTION_NODE, ENTITY_REFERENCE_NODE
ENTITY_NODE, PROCESSING_INSTRUCTION_NODE, COMMENT_NODE, DOCUMENT_NODE, DOCUMENT_TYPE_NODE
DOCUMENT_FRAGMENT_NODE, NOTATION_NODE
ownerDocument : HTMLDocument()
nodeName, nodeValue, nodeType
parentNode, childNodes, firstChild, lastChild
previousSibling, nextSibling
attributes : NamedNodeMap()
namespaceURI, prefix, localName
생성자 : new Node()
cloneNode(deep)
appendChild(newChild)
insertBefore(newChild, refChild)
replaceChild(newChild, oldChild)
removeChild(oldChild)
hasChildNodes()
hasAttributes()
isSupported(feature, version)
normalize()
NamedNodeMap
생성자 : new NamedNodeMap()
length
getNamedItem(name), getNamedItemNS(namespaceURI, localName)
item(index)
removeNamedItem(name), removeNamedItemNS(namespaceURI, localName)
setNamedItem(arg), setNamedItemNS(arg)
Document
Document
defaultView, doctype
styleSheets
implementation : DOMImplementation()
documentElement : HTMLElement()
생성자 : new Document()
createAttribute(name), createAttributeNS(namespaceURI, qualifiedName)
createCDATASection(data)
createComment(data)
createDocumentFragment()
createElement(tagName), createElementNS(namespaceURI, qualifiedName)
createEntityReference(name)
createEvent(eventType)
createProcessingInstruction(target, data)
createTextNode(data)
getElementById(elementId)
getElementsByTagName(tarname), getElementsByTagNameNS(namespaceURI, localName)
importNode(importedNode, deep)
querySelector(selectors), querySelectorAll(selectors)
HTMLDocument
title, referrer, domain, URL
cookie, lastModified
body : HTMLElement()
images, applets, links, forms, anchors : HTMLCollection()
생성자 : new HTMLDocument()
open(), close()
getElementsByName(elementName)
write(text), writeln(text)
Element
HTMLElement
입출력
브라우저 입출력
Cookie 입출력
객체 생성 방법
함수를 사용하여 객체 생성
var aa = "global aa";
var ab = "global ab";
var ac = "global ac";
var child = null;
var Parent1 = function() {
var aa = 'aa'; //--- 외부에서 참조 불가
this.aa1 = function() { return aa; };
this.aa2 = function() { return this.aa; };
this.ab = 'ab'; //--- 외부에서 참조 가능
this.ab1 = function() { return ab; };
this.ab2 = function() { return this.ab; };
};
Parent1.prototype = {
aa3: function() { return aa; },
aa4: function() { return this.aa; },
ab3: function() { return ab; },
ab4: function() { return this.ab; },
ac: 'ac' , //--- this.ac처럼 외부에서 참조 가능
ac1: function() { return ac; },
ac2: function() { return this.ac; },
};
child = new Parent1();
console.log("aa : " + child.aa); //--- undefined
console.log("aa1() : " + child.aa1()); //--- aa
console.log("aa2() : " + child.aa2()); //--- undefined (this는 child 참조)
console.log("aa3() : " + child.aa3()); //--- Exception : undefined exception (Global 참조)
console.log("aa4() : " + child.aa4()); //--- undefined (this는 child 참조)
console.log("ab : " + child.ab); //--- ab
console.log("ab1() : " + child.ab1()); //--- Exception : undefined exception (Global 참조)
console.log("ab2() : " + child.ab2()); //--- ab
console.log("ab3() : " + child.ab3()); //--- Exception : undefined exception (Global 참조)
console.log("ab4() : " + child.ab4()); //--- ab
console.log("ac : " + child.ac); //--- ac
console.log("ac1() : " + child.ac1()); //--- Exception : undefined exception (Global 참조)
console.log("ac2() : " + child.ac2()); //--- ac Object를 사용하여 객체 생성
prototyp을 사용한 상속 기능이 동작하지 않으므로 상속을 위한 객체 생성용으로는 부적합
var Parent2 = {
aa: 'ba', //--- this.ba처럼 외부에서 참조 가능
aa1: function() { return aa; },
aa2: function() { return this.aa; },
ab: 'bb' ,
ab1: function() { return ab; }, //--- Exception : Unexpected identifier
ab2: function() { return this.ab; }
};
Parent2.prototype = { //--- Object.create()시 전혀 사용되지 않음
aa3: function() { return aa; },
aa4: function() { return this.aa; },
ab3: function() { return ab; },
ab4: function() { return this.ab; },
ac: 'bc' ,
ac1: function() { return ac; },
ac2: function() { return this.ac; }
};
child = Object.create(Parent2); //--- __proto__만 자동으로 복사됨
console.log("aa : " + child.aa); //--- ba
console.log("aa1() : " + child.aa1()); //--- Exception : undefined exception (Global 참조)
console.log("aa2() : " + child.aa2()); //--- ba
//console.log("aa3() : " + child.aa3()); //--- Exception : undefined is not a function
//console.log("aa4() : " + child.aa4()); //--- Exception : undefined is not a function
console.log("ab : " + child.ab); //--- bb
console.log("ab1() : " + child.ab1()); //--- Exception : undefined exception (Global 참조)
console.log("ab2() : " + child.ab2()); //--- bb
//console.log("ab3() : " + child.ab3()); //--- Exception : undefined is not a function
//console.log("ab4() : " + child.ab4()); //--- Exception : undefined is not a function
console.log("ac : " + child.ac); //--- undefined
//console.log("ac1() : " + child.ac1()); //--- Exception : undefined is not a function
//console.log("ac2() : " + child.ac2()); //--- Exception : undefined is not a function유용한 라이브러리
JSON을 String으로 변환
function JSONtoString(arg) {
var rtStr = "";
var flagStart = true;
if (typeof(arg) == "object"){
if (typeof(arg.length) == "number") {
rtStr = "[";
for (name in arg) {
if (flagStart) {
flagStart = false;
} else {
rtStr = rtStr + ","
}
rtStr = rtStr + JSONtoString(arg[name](name.md));
}
rtStr = rtStr + "]";
} else {
rtStr = "{";
for (name in arg) {
if (flagStart) {
flagStart = false;
} else {
rtStr = rtStr + ","
}
rtStr = rtStr + '"' + name + '":';
rtStr = rtStr + JSONtoString(arg[name](name.md));
}
rtStr = rtStr + "}";
}
} else {
return '"' + arg + '"';
}
return rtStr;
}데이터 모델
InnerHTML Model
this.'''innerHTML''' = str;
this.'''innerText''' = str;
this.outerHTML = str;
this.outerText = str;
this.insertAdjacentHTML(,);
this.insertAdjacentHTML("beforebegin", str);
this.insertAdjacentHTML("afterbegin", str);
this.insertAdjacentHTML("beforeend", str);
this.insertAdjacentHTML("afterend", str);
insertAdjacentText(,);
this.insertAdjacentText("beforebegin", str);
this.insertAdjacentText("afterbegin", str);
this.insertAdjacentText("beforeend", str);
this.insertAdjacentText("afterend", str);
Element Model
this.parentElement;
this.children;
this.contains(node);
bodyElement = document.getChildNodes().item(0).getChildNodes().item(1);
bodyElement = document.getFirstChild().getFirstChild().getNextSibling();
typeInt = bodyElement.getNodeType()
elementName = bodyElement.getNodeName();
elementContent = bodyElement.getFirstChild().getNodeValue();
var td = xCreateElement("td");
linkText = document.createTextNode("edit");
tr.appendChild(td);
oldNode = theDiv.firstChild.nextSibling.nextSibling;
theDiv.removeChild(oldNode);
newNode = document.createTextNode(newText);
theDiv.appendChild(newNode);
theDiv.replaceChild(newNode, oldNode);
theDiv.firstChild.nextSibling.nextSibling.nodeValue=newText;
Document All Model
window.document.all"idVal"
'''window.document.all.idVal'''
var tagH2 = window.document.all.tags("H2");
var tags = window.document.getElementsByTagName('input');
tagH21, 2 . . .this.getElementsByTagName("*");
formElement = '''window.document.getElementById("noteForm")''';
JSDT
사용자 정의 라이브러리
슬라이드
.container {
overflow: hidden;
}
.container > div {
width: 300vw;
}
.container > div > div {
width: 100vw;
float: left;
}
.container > div > div > img {
width: 100%;
}
.selectTwo {
transition: transform 0.5s;
transform: translate(-100vw);
}const btn002 = document.querySelector('.btn002');
btn002.addEventListener('click', function() {
document.querySelector('.container > div').style.transform = 'translate(-100vw)';
});
스크롤
Mouse
const item = document.querySelector('.item');
//--- clientX, clientY : 화면 기준 위치 (스크롤 영역 제외)
//--- offsetX, offsetY : 이벤트가 발생한 요소에서의 위치
//--- pageX, pageY : 페이지에서의 위치
//--- screenX, screenY : 모니터 화면 기준 위치
document.addEventListener('mousemove', mouse_direction);
let direction = '';
let oldX = 0;
let oldY = 0;
function mouse_direction(e) {
if ((e.pageX > oldX) && (e.pageY == oldY)) {
direction = 'right';
}
console.log(direction);
}
reserved
getInt(argValue, argDefault)
function getInt(argValue, argDefault)
{
if (arguments.length == 1) {
return Math.round(getFloat(argValue, 0.0));
} else {
return Math.round(getFloat(argValue, argDefault));
}
}getFloat(argValue, argDefault)
function getFloat(argValue, argDefault)
{
if (arguments.length == 1) {
return getFloat(argValue, 0.0);
}
if (argValue) {
if (typeof argValue === "number") {
return argValue;
} else {
return parseFloat(argValue);
}
} else {
return argDefault;
}
}funcGetProcMonth(argStart, argMonth)
function funcGetProcMonth(argStart, argMonth)
{
var tmpDateStart = null, tmpDateCalc = null;
tmpDateStart = new Date(argStart.getYear(), argStart.getMonth() + argMonth, 1);
tmpDateCalc = new Date(argStart.getYear(), argStart.getMonth() + argMonth, argStart.getDate());
if (tmpDateStart.getMonth() == tmpDateCalc.getMonth()) {
return tmpDateCalc;
} else {
return new Date(argStart.getYear(), argStart.getMonth() + argMonth + 1, 0);
}
}funcFormatInt(argInt)
function funcFormatInt(argInt)
{
return funcFormatIntStr(argInt + "");
}
function funcFormatIntStr(argIntStr)
{
if (argIntStr.length < 4) {
return argIntStr;
} else {
return funcFormatIntStr(argIntStr.substr(0, argIntStr.length - 3)) + "," + argIntStr.substr(argIntStr.length - 3);
}
}Frame에서 화면 중앙 정열
function getMarginLeft() {
var widthScreen = window.document.body.clientWidth;
if (widthScreen < 1000) {
return 0;
} else {
return Math.round((widthScreen - 1000) / 2);
}
}
// scrollWidth, clientWidth, offsetWidth
function funcResize() {
var leftMargine = getMarginLeft();
window.headerFrame.document.body.style.marginLeft = leftMargine + "px";
}
window.onload = funcResize;
window.onresize = funcResize;
window.onload = function() {
allFrame.cols = window.top.getMarginLeft() + ",200,*";
}
window.onresize = function() {
allFrame.cols = window.top.getMarginLeft() + ",200,*";
}
관련 자료
참고 문헌
[HtmlRef.chm](images/6/64/HTMLREF CHM.zip.md)
[[Category:JavaScript|Category:JavaScript]]
[[Category:기술_자료실]]
분류: HTML5