node js
JavaScript 서버에도 실행할수 있도록
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
비교연산자
<!DOCTYPE html>
<!--
== : undefined과 null을 동등하다고 평가
문자열과 숫자를 비교할 경우 숫자가 문자열로 변환 후 평가
숫자와 불리언 값을 비교할 경우 => true는 1로, false는 0으로 변환후 평가
객체를 숫자 또는 문자열과 비교할 경우 => 객체의 기본값으로 평가
=== : 위의 좌우 표현식의 평가가 동일하고, 데이터 타입도 같은 경우 true 반환
==와 다르게 타입 변환을 하지 않음.
-->
<html>
<head>
<meta charset="UTF-8">
<title>비교연산자</title>
</head>
<body>
<script type="text/javascript">
//비교연산자
var x = 5;
var y = 3;
var z = '5';
// == 연산자에서 문자열과 숫자를 비교할 경우 => 숫자가 문자열로 변환되어 비교연산 수행함.
document.writeln('x == z: ' + (x == z) + '<br/>'); //x == z: true
document.writeln('x == z: ' + (x != z) + '<br/>'); //x != z: false
// === 연산시에는 비교연산시 데이터 타입 변환을 수행하지 않음.
document.writeln('x === z: ' + (x === z) + '<br/>'); //x === z: false
document.writeln('x === z: ' + (x !== z) + '<br/>'); //x !== z: true
var arr1 = ['홍길동','이순신','강감찬'];
var arr2 = ['홍길동','이순신','강감찬'];
//var arr2 = arr1;
// == 연산자에서 참조형을 비교하는 경우 참조값이 같은 경우에만 true를 반환함.
// 독립된 객체이기 때문에 동등 비교하면 거짓이 반환.
document.writeln('arr1 == arr2: ' + (arr1 == arr2) + '<br/>'); //arr1 == arr2: false
console.log(arr1);
</script>
</body>
</html>
기타 연산자
<!DOCTYPE html>
<!--
*기타 연산자
typeof : 변수의 데이터 타입을 반환하는 연산자
instanceof : 피연산자의 객체 타입 조사
delete : 피연산자로 지정된 객체의 프로퍼티나 배열의 원소를 삭제
-->
<html>
<head>
<meta charset="UTF-8">
<title>기타연산자</title>
</head>
<body>
<script type="text/javascript">
//기타 연산자
// 배열 객체에 숫자, 문자열, 불리언, Date 객체, 배열 객체들을 원소로 담음.
var arr = [1, '홍길동', '010-0000-0000', true, new Date(), [10, 20, 30]];
document.writeln('typeof arr[0]:' + typeof arr[0] + '<br/>'); //typeof arr[0]: number
document.writeln('typeof arr[1]:' + typeof arr[1] + '<br/>'); //string
document.writeln('typeof arr[2]:' + typeof arr[2] + '<br/>'); //string
document.writeln('typeof arr[3]:' + typeof arr[3] + '<br/>'); //boolean
document.writeln('typeof arr[4]:' + typeof arr[4] + '<br/>'); //object
document.writeln('typeof arr[5]:' + typeof arr[5] + '<br/>'); //object
document.writeln('<br/>');
document.writeln('arr[4] instanceof Date: ' + (arr[4] instanceof Date) + '<br/>'); //arr[4] instanceof Date: true
document.writeln( 'arr[4].constructor: ' + (arr[4].costructor) + '<br/>'); //arr[4].constructor: undefined
document.writeln('<br/>');
document.writeln('arr[5] instanceof Array: ' + (arr[5] instanceof Array) + '<br/>'); //arr[5] instanceof Date: true
document.writeln( 'arr[5].constructor: ' + (arr[5].costructor) + '<br/>'); //arr[5].constructor: undefined
document.writeln('<br/>');
document.writeln('arr: ' + arr + '<br/>');
document.writeln('<br/>');
document.writeln('delete arr[2]: ' + delete arr[2] + '<br/>'); //true
document.writeln('arr[2]: ' + arr[2] + '<br/>'); //undefined
document.writeln('<br/>');
document.writeln('arr: ' + arr + '<br/>');
var point = {
x : 20,
y : 30,
toString : function() {
return '{ x: ' + this.x + ', y: ' + this.y + ' }';
}
};
//point 객체출력시에 point 객체내에 정의한 toString메소드를 호출함.
document.writeln('point: ' + point + '<br/>');
//point 객체의 y 프로퍼티를 제거
document.writeln('delete point.y: ' + delete point.y + '<br/>');
document.writeln('point: ' + point + '<br/>');
// point 객체의 toString 메서드 제거
document.writeln('delete point.toString: ' + delete point.toString + '<br/>');
document.writeln('point: ' + point + '<br/>');
</script>
</body>
</html>
제어문
for문
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>for 문</title>
</head>
<body>
<script type="text/javascript">
//for 문
var arr2d = [
['을지문덕','연개소문'],
['광개토대왕','세종대왕'],
['김유신','계백']
];
for (var i = 0; i < arr2d.length; i++) {
for (var j = 0; j < arr2d[i].length; j++) {
document.writeln(arr2d[i][j] + '<br/>');
}
document.writeln('<br/>');
}
</script>
</body>
</html>
for...in 연산자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>for...in문</title>
</head>
<body>
<script type="text/javascript">
//for...in문
//배열 객체를 선언하고 name과 age 프로퍼티를 가진 객체를 원소로 초기화함.
var arr =[
{ name : '을지문덕', age : 50},
{ name : '연개소문', age : 35},
{ name : '광개토대왕', age : 28},
{ name : '세종대왕', age : 38},
{ name : '김유신', age : 46},
{ name : '계백', age : 36}
];
//바깥 for...in 반복문에서는 배열의 인덱스를 위해 idx에 저장함
for ( var idx in arr) {
document.writeln('{ ');
//안쪽 for...in 반복문에서는 배열의 원소인 객체의 프로퍼티명을 취해 prop에 저장.
for ( var prop in arr[idx]) {
//인덱스 idx의 배열 원소인 객체에 접근해 prop에 담겨있는 프로퍼티명을 사용해
//프로퍼티값을 출력함.
document.writeln(prop + " : " + arr[idx][prop]);
if(prop == 'age')
break;
document.writeln(', ');
}
document.writeln(' }<br/>');
}
</script>
</body>
</html>
함수
<!DOCTYPE html>
<!--
*함수를 정의하는 3가지 방법
1) function문을 이용해 함수를 정의
function 함수명([매개변수 목록]){
문장들
[return 반환값;]
}
2) 함수리터럴(값으로 인식)을 이용해 함수를 정의
var 변수명 = function([매개변수 목록]) {
문장들
[return 반환값;]
}
3) Function 생성자를 이용해 함수를 정의
var 변수명 = new Function('[매개변수],...');
-->
<html>
<head>
<meta charset="UTF-8">
<title>함수의 정의와 호출</title>
</head>
<body>
<script type="text/javascript">
//함수의 정의 호출
// function문에 의해 정의된 print 함수 : 매개변수 message에 전달된 값을 출력
function print(message){
document.writeln(message);
}
// function문에 의해 정의된 println 함수 : 매개변수 message에 전달된 값과
// 문자열 '<br/>'을 접합연산한 결과를 출력함.
function println(message){
document.writeln(message + '<br/>');
}
var pointA = { x : 25, y : 40};
var pointB = { x : 50, y : 80};
// function문에 의해 정의된 distance 함수 : x, y 프로퍼티를 가진 객체를 매개변수로
// 내장객체 Math가 제공하는 sqrt함수를 호출해 두 점간의 거리를 반환함.
function distance(p1, p2){
var dX = p2.x - p1.x;
var dY = p2.y - p1.y;
return Math.sqrt(dX*dX, dY*dY);
}
print('사이의 거리: ');
println(distance(pointA, pointB));
//함수리터럴에 의해 정의된 square함수 : x, y 프로퍼티를 가진 객체를 매개변수로 하여
//두점을 이용해 구성된 사각형의 면적을 반영함
var square = function(leftTop, rightButtom){
var width = rightButtom.x - leftTop.x;
var height = rightButtom.y - leftTop.y;
return width * height;
}
print("pointA와 pointB로 구성한 사각형의 넒이: ");
println(square(pointA, pointB));
// Function 생성자에 의해 정의된 triangle함수 : base와 height
// 매개변수에 전달된 값을 이용해 삼각형 면적을 반환함.
var triangle = new Function('base', 'height', 'return (base * height)/2;');
print('base와 height로 구성한 삼각형 넒이 : ');
println(triangle(30, 20));
</script>
</body>
</html>
전역 스코프와 지역 스코프
<!DOCTYPE html>
<!--
*스코프(scope) : 코드에서 변수를 참조할수 있는
해당 변수의 유효범위를 결정하는 개념.
*코드 전체에서 접근가능한 전역(global) 스코프 ==> 전역변수,
함수 내의 코드에서만 접근 가능한 지역(local) 스코프 만 존제 ==> 지역변수.
-->
<html>
<head>
<meta charset="UTF-8">
<title>전역 스코프와 지역 스코프</title>
</head>
<body>
<script type="text/javascript">
//전역 스코프와 지역 스코프
//전역 스코프를 가진 전역 변수
var x = 'global x';
var y = 'global y';
function func() {
//지역 스코프를 가진 지역 변수 : 반드시 var 키워드와 함깨 선언되어야함.
var x = 'local x';
//var 키워드 없을 경우 : 전역스코프에 접근에 동일 이름을 가진 전역변수를 사용하며,
//만일 동일 이름의 전역 변수가 없을 경우 전역변수를 새로 등록함.
y = '글로벌 y';
document.writeln('x : ' +x+ '<br/>');
document.writeln('y : ' +y+ '<br/>');
document.writeln('<br/>');
}
document.writeln('func() 호출 전<br/>');
document.writeln('x : ' +x+ '<br/>');
document.writeln('y : ' +y+ '<br/>');
document.writeln('<br/>');
document.writeln('func() 호출 <br/>');
func();
document.writeln('func() 호출 후<br/>');
document.writeln('x : ' +x+ '<br/>');
document.writeln('y : ' +y+ '<br/>');
document.writeln('<br/>');
</script>
</body>
</html>
함수의 생략 가능한 매개변수
<!DOCTYPE html>
<!--
*함수의 매개변수와 인자
!)함수 정의시 선언된 매개변수에 상관없이 인자를 전달할수 있으며,
어떤 데이터 타입의 값이라도 전달할수 있음.
2)선언된 매개변수보다 작은 수의 인자 값들을 전달하면,
값을 전달받지 못한 남은 매개변수들은 undefined 값을 갖게 됨.
3)생략이 가능한 매개변수는 매개변수 목록의 끝에 의지하도록하여
임의로 생략할수 있게 만드는것이 중요.
-->
<html>
<head>
<meta charset="UTF-8">
<title>함수의 생략 가능한 매개변수</title>
</head>
<body>
<script type="text/javascript">
//함수의 생략가능한 매개변수
function add(x, y){
alert(arguments[5]);
alert(arguments[x.length]);
return x + y;
}
document.writeln(add(6, 4, 5, 6, 7, 'hello'));
document.writeln('<br/>');
function sum(array, start, end) {
/* 매개변수 array에 전달된 값이 없다면 빈 배열을 할당함. */
if(!array)
array = [];
/* 매개변수 start에 전달된 값이 없을 경우 0을 할당함. */
if(!start)
start = 0;
/* 매개변수 end에 전달된 값이 없을 경우 원소의 갯수를 할당함 */
if(!end)
end = array.length;
/* 매개변수 array에 전달된 값이 배열 객체일 경우에만 합계를 계산함 */
if(array instanceof Array){
if((typeof start) != 'number' || (typeof end) != 'number')
throw new Error('sum() : 두번째 매개변수와 세번째 매개변수의 전달인자는 숫자여야 한다.');
var result = 0;
for (var i = start; i < end; i++) {
if((typeof array[i]) != 'number')
throw Error('sum() : array[' +i+ ']에 저장된 값' + array[i] + '는 숫자 타입이 아닙니다.');
result += array[i]; //합계를 계산
}
return result;
}
else {
throw new Error('sum() : 첫번째 매개변수의 전달인자는 배열이여야 합니다.')
}
} //sum()
var arr1 = [1, 2, 3, 4, 5];
var obj = {
name : '홍길동', phone : "010-0000-0000",
};
var arr2 = [1, 2, '3rd', 4, 5];
try{
document.writeln('sum(arr1, 0, arr1.length): ' + sum(arr1, 0, arr1.length) + '<br>');
document.writeln('sum(arr1, 0, 4): ' + sum(arr1, 0, 4) + '<br>');
document.writeln('sum(arr1, 0): ' + sum(arr1, 0) + '<br>');
document.writeln('sum(arr1, 2): ' + sum(arr1, 2) + '<br>');
document.writeln('sum(arr1): ' + sum(arr1) + '<br>');
document.writeln('sum(): ' + sum() + '<br>');
document.writeln('sum(obj): ' + sum(obj) + '<br>');
}catch(e){
document.writeln(e + '<br>');
}
try {
document.writeln('sum(arr1, \'x\', 4): ' + sum(arr1, 'x', 4) + '<br/>');
} catch (e) {
document.writeln(e + '<br/>');
}
try {
document.writeln('sum(arr2): ' + sum(arr2) + '<br/>');
} catch (e) {
document.writeln(e + '<br/>');
}
</script>
</body>
</html>
함수에 인자(함수 리터럴)로 함수를 전달
<!DOCTYPE html>
<!-- 자바스크립트에서 함수 :
- 데이터의 속성을 갖고 있어서,
변수, 객체의 프로퍼티에서 저장될수 있으며,
함수의 전달 인자로도 사용될수 있음.
------------------------------------------
익명함수로 사용: 함수 리터럴
-->
<html>
<head>
<meta charset="UTF-8">
<title>함수에 인자(함수 리터럴)로 함수를 전달</title>
</head>
<body>
<script type="text/javascript">
//함수에 함수 리터럴을 전달하는 익명함수
var caculator = {
//operator 메서드의 첫번째 매개변수는 함수를 인자로 받음.
operator : function(method, operand1, operand2){
if(typeof method == 'function'){
if(typeof operand1 != 'number' || typeof operand2 != 'number')
throw new Error('operator(): 두번째, 세번째 매개변수가 반드시 숫자를 전달해야 한다!');
return method(operand1, operand2)
} else
throw new Error('operator(): 첫번째 매개변수로 함수를 전달해야 한다.')
}
};
try {
var result1 = caculator.operator(function(x, y){return x+y}, 2, 3);
document.writeln('result1: ' + result1 + '<br/>');
var result2 = caculator.operator(function(x, y){return x+y}, '2', 3);
document.writeln('result2: ' + result1 + '<br/>');
} catch (e) {
document.writeln(e + '<br/>');
}
</script>
</body>
</html>
