스크립트 기초

스크립트 구문

함수 호출

함수는 파라미터 정보를 받아 값을 반환합니다. 함수를 사용하여 사용자가 작성한 코드를 편리하게 다시 사용할 수 있습니다. 함수를 사용하려면 함수 이름이 반드시 호출되어야 하며, 괄호가 그 뒤에 위치해야 합니다. 만약 필요하다면 괄호 내에 파라미터 값을 입력해야 합니다. 함수의 사용은 스크립트의 가독성과 유지보수에 용이합니다. 함수는 다음처럼 사용됩니다.

page.open("Introduction");

Canvas가 지원하는 함수 목록을 확인하려면 다음을 확인하여 주시기 바랍니다. 스크립트 및 명령식 부록.

세미콜론

Javascript를 사용하므로 Canvas 스크립트 편집기에서 매 라인의 끝에 세미콜론을 반드시 사용할 필요는 없습니다. 그러나 세미콜론을 사용해 가독성을 개선하고 의도치 않은 동작을 방지할 수 있습니다.

function1();
function2();

위의 스크립트는 다음과 동일하게 동작합니다.

function1()
function2()

세미콜론을 사용하면 한 줄에 여러 동작을 입력할 수 있습니다.

function1();function2();

변수 선언

변수는 사용자가 스크립트 내에서 사용할 값을 저장하는 데 사용합니다. 변수명은 대/소문자를 구분하며, 중간에 공백이 있으면 안됩니다. 또한 반드시 문자 또는 밑줄문자 _로 시작해야 합니다. 변수의 종류는 초기화 할 때 사용한 값에 의해 결정됩니다.

변수 선언 시 형식에 대한 예시는 다음과 같습니다.

var variable; // 변수 선언 시 값을 지정하지 않으면 초기 값이 존재하지 않습니다.
var variable1, variable2, variable3; // 쉼표를 사용하여 한 줄에 여러 변수를 선언할 수 있습니다.
var variable = 1; // 변수 선언 시 이와 같이 초기 값을 저장할 수 있습니다.

변수는 전부 로컬입니다. 변수를 선언한 스크립트 또는 함수 내에서만 사용이 가능합니다.

변수 사용/설정

변수가 선언되고 나면 사용자는 연산자 = 를 사용해 값을 초기화 할 수 있습니다. 변수에 값이 저장되고 나면 스크립트의 다른 위치에서 그 값에 접근하기 위해 변수를 사용할 수 있습니다. 다음은 변수를 사용하는 예시입니다.

var a = 5; // a에 5라는 값 저장
var b = 2; // b에 2라는 값 저장
var tag = "Tagname" // tag에 "Tagname"라는 값 저장
tag.write(tag, a); // tag.write("Tagname", 5); 와 동일한 동작

데이터 종류

Javascript 에서는 모든 변수에 종류가 함께 지정됩니다. 일반적으로 Boolean, String, Number 종류가 사용됩니다. 이러한 종류는 변수가 어떤 값으로 초기화 되는지에 따라 달라집니다

43.110   // number
"world"  // string
25       // number
true     // boolean
false    // boolean

typeof 를 이용해 변수의 데이터 종류를 확인할 수도 있습니다.

var check = 3;
typeof check; // number

형 변환

변수 하나에 다른 종류의 데이터를 저장하면 저장된 데이터의 종류가 하나로 강제 변경되는 경우가 발생합니다. 이를 형 변환 (Type Coercion) 이라고 부릅니다. 이렇게 다른 종류의 데이터를 한 변수에 저장하는 것은 사용자가 의도치 않은 스크립트 동작을 유발 할 수 있으므로 변수에는 항시 한 종류의 데이터만 저장하는 것을 권장합니다. 다음은 형 변환이 일어날 수 있는 예시입니다.

var a = 5;
var b = "10";
var result = a + b; // result: "510";
!1         // false
275 + true // 276
2 * "25"   // 50

연산자

연산자는 변수를 더하거나, 빼거나, 곱하거나, 나눌 때 사용할 수 있습니다. 각 연산자에 대한 내용은 스크립트 기본 정보를 참고하여 주시기 바랍니다.

Javascript에는 연산자를 3가지 방식으로 사용할 수 있습니다.

Prefix: <연산자> <표현식 1> 예시: var one

Midfix: <표현식 1> <연산자> <표현식 2> 예시: A = B

Postfix: <표현식 1> <연산자> 예시: x++

1 + 1          // 덧셈, 2
2 - 1          // 뺄셈, 1
3 * 3          // 곱셈, 9
8 / 4          // 나눗셈, 2
2 == 2         // 동등, true
2 < 1          // 작음, false
!true          // 논리 not, false
true && false  // 논리 and, false
true || false  // 논리 or, true

문자열, 따옴표, 이스케이프 문자

작은 따옴표나 큰 따옴표를 쌍으로 사용하면 그 내부의 내용은 무조건 문자열로 취급됩니다. 변수의 이름을 사용하더라도 같은 종류의 따옴표로 묶인 상태이면 변수가 아닌 그 문자로 표시됩니다.

var num = 5;
notification.send(num);   // 5 표시
notification.send("num"); // num 표시
notification.send('num'); // num 표시

문자열 내에서 따옴표를 표시하고 싶다면 이스케이프 문자 \ 를 사용해야 합니다. 문자열 내에서 줄 바꿈을 할 때 \n 를 사용하고, 문자 중간에 탭을 추가할 때 \t 를 사용할 수 있습니다.

"\"x\""     // "x"
"\'y\'"     // 'y'
"\\Hello\\" // \Hello\
"Line 1\nLine 2" // Line 1
                 // Line 2
"x\ty\tz"        // x  y  z

표현식 및 괄호

표현식은 수학에서 하는 것처럼 한데 묶거나 표현식 안에 표현식을 넣는 등 다중으로 사용할 수 있습니다. 사용자는 괄호를 이용해 연산의 순서를 조절할 수도 있습니다. 이 내용은 표현식 뿐만 아니라 함수 호출에도 적용됩니다. 리턴 값의 형식이 함수의 파라미터 조건에 맞는다면 함수 내에서 다른 함수를 이용할 수 있습니다.

1 + (2 * 3)  // 7
(1 + 2) * 3  // 9
tag.write("tagName", tag.read("tagName") + 1 ); // tagName 태그에 1 더한 값을 tagName 태그에 쓰기

화이트스페이스

Javascript는 띄어쓰기, 탭, 줄바꿈 등을 무시합니다.

화이트스페이스를 사용한 스크립트이든 아니든 동작은 동일하게 됩니다. 다음은 화이트스페이스 사용 여부는 다르지만 동작 결과는 동일한 스크립트 예시입니다.

var x = 2;if(x < 3){x++;}

var x = 2;
if(x < 3){
  x++;
}