배열의 값 복사
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Function Demo </title>
</head>
<body>
<script>
function arraycopy(array){ //배열의 값복사
var tempArray = [];
for(var i in array)
tempArray[i] = array[i];
return tempArray;
}
var firstArray = [1,2,3];
var secondArray = arraycopy(firstArray);
secondArray.push(4);
document.write(firstArray.toString());
</script>
</body>
</html>
출력:
1,2,3
---------------------------------
위의 secondArray에 4를 넣기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> </title>
</head>
<body>
<script>
function copyArray(array, lastValue){
var tempArray = [];
for(var i in array){
tempArray[i] = array[i];
if(lastValue) tempArray.push(lastValue);
}
return tempArray;
}
var firstArray = [1,2,3];
var secondArray = copyArray(firstArray);
var thirdArray = copyArray(firstArray, 4);
document.write("<p>firstArray = " + firstArray.toString() + "</p>");
document.write("<p>secondArray = " + secondArray.toString() + "</p>");
document.write("<p>thirdArray = " + thirdArray.toString() + "</p>");
</script>
</body>
</html>
출력:
firstArray = 1,2,3
secondArray = 1,2,3
thirdArray = 1,2,3,4
//만약 var thirdArray = copyArray(firstArray, 4, 5, 6); 이것으로 써서 lastvalue를 여러개를 줘서 보내도 출력은 1,2,3,4 만 나온다. 이것을 다 보내기 위해 다음처럼 한다.
---------------------------
위 코드에서 개수를 파악해서 출력함.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Function Demo</title>
</head>
<body>
<script>
//전달되는 인자의 갯수 파악
function copyArray(array, lastValue){
var tempArray = [];
for(var i in array){
tempArray[i] = array[i];
//if(lastValue) tempArray.push(lastValue);
for(var j = 1; j < arguments.length;j++){
tempArray[tempArray.length] = arguments[j];
}
}
return tempArray;
}
var firstArray = [1,2,3];
var secondArray = copyArray(firstArray);
var thirdArray = copyArray(firstArray, 4, 5, 6); //argument의 개수 총 4개임. 0 1 2 3 의 순서.
document.write("<p>firstArray = " + firstArray.toString() + "</p>");
document.write("<p>secondArray = " + secondArray.toString() + "</p>");
document.write("<p>thirdArray = " + thirdArray.toString() + "</p>");
</script>
</body>
</html>
출력:
firstArray = 1,2,3
secondArray = 1,2,3
thirdArray = 1,2,3,6,4,5,6,4,5,6
----------------------------
전달되는 인자의 개수파악해서 값 비교
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> </title>
</head>
<body>
<script>
function max(){
var max = Number.NEGATIVE_INFINITY;
for(var i = 0 ; i < arguments.length ; i++){
if(arguments[i] > max) max = arguments[i];
}
return max;
}
var maxNumber = max(4,7,2,6,100,5000,2,3);
document.write(maxNumber);
</script>
</body>
</html>
출력 : 5000
--------------------------------
전달된 인자 검사
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Function Demo </title>
</head>
<body>
<script>
//전달된 인자 검사
function sum(a, b, c){
if(arguments.length !=3)
throw new Error("함수는 3개의 인자만을 사용할 수 있습니다.");
for(var i = 0 ; i < arguments.length ; i++){
if(typeof arguments[i] != "number"){
throw new Error("전달된 인자는 모두 숫자형이어야 합니다.");
}
}
return a + b + c;
}
try{
document.write("<p>" + sum(2,5,9,3,5) + "</p>");
}catch(e){
document.write("<p style='color:red'>" + e.message + "</p>");
}
</script>
</body>
</html>
--------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> </title>
</head>
<body>
<script>
function check(obj){
//document.write("<p>" + typeof obj + "</p>");
if((obj instanceof Array) || (typeof obj == "object" && "length" in obj)){
return "배열";
}else{
return "배열이 아니다";
}
};
var array = [1,2,3];
var arrayObject = {a:1, b:2, c:3};
document.write("<p>" + check(array) + "</p>");
document.write("<p>" + check(arrayObject) + "</p>");
</script>
</body>
</html>
출력:
배열
배열이 아니다
----------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> 화시온도 -> 섭시 온도</title>
</head>
<body>
<script>
function change(화시){
var 섭시 = Math.floor((화시 - 32) * (10/18));
return 섭시;
}
document.write("<p>화시 100도는 " + change(100) + "</p>");
</script>
</body>
</html>
-------------------------
Anonymous Functions
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> </title>
</head>
<body>
<script>
//
//function calc(base, height){
// return base * height / 2;
//}
var calc = new Function('base', 'height', 'return base * height / 2'); //인자를 스트링형으로
document.write("<p>" + calc(2, 5) + "</p>");
</script>
</body>
</html>
--------------------------------
function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> </title>
</head>
<body>
<script>Array
//방법1 정적 function
//function calc(base, height){
// return base * height / 2;
//}
//방법2 anonymous function 혹은 dynamic function
//var calc = new Function('base', 'height', 'return base * height / 2');
//방법 3. function literal
var calc = function(base, height){
return base * height / 2;
};
document.write("<p>" + calc(2, 5) + "</p>");
</script>
</body>
</html>
------------------------
function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> </title>
<script>
window.addEventListener("load", function(){
document.body.style.backgroundColor = 'yellow';
}, false);
</script>
</head>
<body>
</body>
</html>
//이런식으로 function의 이름을 쓸 자리에 function을 써서 사용 가능.
=====================================
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
EVENT
mouse : onmouseover / onmouseout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> </title>
<style>
*{
padding:0; margin:0;
}
p {
margin-top:20px;
text-align:center;
}
</style>
<script>
function change(color){
document.body.style.backgroundColor = color;
}
</script>
</head>
<body>
<p>
<button onmouseover="change('yellow')"
onmouseout="document.body.style.backgroundColor='white'">노랑</button>
<button onmouseover="change('red')"
onmouseout="document.body.style.backgroundColor='white'">빨강</button>
<button onmouseover="change('blue')"
onmouseout="document.body.style.backgroundColor='white'">파랑</button>
<button onmouseover="change('green')"
onmouseout="document.body.style.backgroundColor='white'">녹색</button>
</p>
</body>
</html>
------------------------
event handling
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> </title>
<script>
function check(){
var irum = document.forms[0].irum.value;
if(!irum || irum.length == 0) {
alert("이름이 빠졌습니다.");
document.forms[0].irum.focus();
return false; //return을 false로 하면 이벤트가 발생되지않는다(아무일도 안일어남)
} //반대로 return true를 하면 이벤트 발생.(안쓰는거랑같음)
}
</script>
</head>
<body>
<form method="get" action="test.jsp">
<input type="text" name="irum">
<button type="button" onclick="check()">서버로 전송</button>
</form>
</body>
</html>
--------------------------
this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> </title>
<script>
function check(){
alert(document.forms[0].irum.value);
}
</script>
</head>
<body>
<form>
<p><label>이름 : <input type="text" name="irum" id="irum"></label></p>
<p><input type="button" value="전송" onclick="check()"></p>
</form>
</body>
</html>
위가 지금까지 썼던 코드 방식.
onclick="check(this)" 을 이렇게 쓰고
function check(t){ //여기서 t는 전송버튼
alert(t.value);
}
이렇게 바꿔서 실행하면 전송 버튼의 값인 전송이 출력됨.
onclick="check(this.form)" 이렇게 쓰고
function check(f){ //여기서 f는 전송버튼의 form.
alert(f.irum.value);
}
위와 같이 변형하여 실행하면 텍스트박스의 값을 출력한다.
--------------------------
위의 노랑 빨강 파랑 녹색 의 색이 변하는 코드는 dom level 0 이었다. dom level 2로 바꿔보면
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> </title>
<style>
*{
padding:0; margin:0;
}
p {
margin-top:20px;
text-align:center;
}
</style>
<script src="js/util.js"></script>
<script>
catchEvent(window, "load", init);
function init(){
catchEvent(document.getElementById('yellow'), "click", change);
catchEvent(document.getElementById('red'), "click", change);
catchEvent(document.getElementById('blue'), "click", change);
catchEvent(document.getElementById('green'), "click", change);
}
function change(){
document.body.style.backgroundColor = this.id;
}
</script>
</head>
<body>
<p>
<button id="yellow">노랑</button>
<button id="red">빨강</button>
<button id="blue">파랑</button>
<button id="green">녹색</button>
</p>
</body>
</html>
util.js : 여기서는 if 는 비ms , else if에서는 윈도우.
function catchEvent(eventObj, event, eventHandler) {
if (eventObj.addEventListener) { //비ms에서 사용
eventObj.addEventListener(event, eventHandler,false);
} else if (eventObj.attachEvent) { //윈도우즈에서 사용
event = "on" + event;
eventObj.attachEvent(event, eventHandler);
}
}
function cancelEvent(event) {
if (event.preventDefault) {
event.preventDefault(); //비ms, dom2에서 사용
event.stopPropagation(); //비ms,dom0에서 사용
} else {
event.returnValue = false; //ms, dom2에서 사용
event.cancelBubble = true; //ms, dom0에서 사용
}
}
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
'Java & Oracle' 카테고리의 다른 글
| cookie , dom : 접근법 (0) | 2014.06.04 |
|---|---|
| 자바스크립트 function, select, checkbox, radiobox, 개인정보 샘플, location, history, useragent (0) | 2014.06.03 |
| array : join, sort, concat, slice, push, unshift, 성적관리프로그램, RegExp (0) | 2014.05.30 |
| 자바스크립트 for ~ in, email형식, 객체만들기, 출력을 새창으로, number, string, 달력, date, 시계, math, d-day 계산기 (0) | 2014.05.29 |
| 자바스크립트 배열, 값 접근, delete, in, 성적관리프로그램, 소수구하기, 구구단, 환자 관리 프로그램 (0) | 2014.05.28 |