-내장함수-
자주 사용되어지는 공통 기능들에 대하여 미리 구현되어진 함수.
웹 브라우저에 미리 내정되어 있으므로 개발자는 함수의 정의 없이 함수를 호출하고 적절한 리턴값을 받아 활용할 수 있다.
eval(문자열) | 주어진 문자열을 수식으로 변환하여 리턴한다. eval("1+1"); -> 1+1계산 |
Number(문자열) | 주어진 문자열의 변수가 숫자모양일 경우 실제 숫자형으로 변환하여 리턴한다. 주어진 문자열이 100.1일 경우 실수 100.1을 리턴 |
parseInt(문자열) | 주어진 문자열의 변수가 숫자모양일 경우 실제 숫자형으로 변환하여 리턴한다. 주어진 문자열이 100.1일 경우 정수 100을 리턴 |
isNaN(문자열) | 주어진 문자열이 숫자형식이 아니면 true, 숫자형식이면 false를 리턴 !isNaN: 숫자형식이면 true, 숫자 형식이 아니면 false |
alert(문자열) | 주어진 문자열을 확인 대화창으로 화면에 표시한다. |
confirm(문자열) | 주어진 문자열이 표시되는 확인/취소 대화창을 화면에 표시한다. |
prompt(문자열) | 주어진 문자열이 제목으로 표시되는, 값을 입력받기 위한 대화창이 화면에 표시된다. |
-문자열에 대한 숫자, 수식 변화-
...javascript
Number eval(string)
...
cf)
리턴값 형식 함수이름(파라미터 형식)
string,
boolean,
void(리턴값 없음)
- 주어진 수식 형태의 문자열을 실제로 계산된 결과값을 리턴한다.
...javascript
Number Number(string)
...
- 주어진 숫자 형태의 문자열을 Number타입의 값으로 변환하여 리턴한다.
...javascript
Number parseInt(string)
...
- 주어진 숫자 형태의 문자열을 Number타입의 값으로 변환하여 리턴한다.
- 정수만 지원한다. 문자열이 실수 형태인 경우 소수점 아래 부분은 잘라낸다.
cf) 0.5를 더하고 parseInt처리 해주면 반올림 효과
-NaN (Not a Number)-
- Number형식으로 변환할 수 없는 값을 Number함수나 parseInt함수로 변환하려고 한 경우 리턴되는 값.
- 전염성이 매우 강해서 한 번 NaN으로 결정된 값에는 어떤 수를 연산시키건 결과가 NaN이 된다.
숫자 < NaN <string (문자열)
...javascript
var k = parseInt("hello"); // <-- k = NaN;
var c = k + 100; // <-- c = NaN + 100 = NaN
- 문자열과 결합할 경우 서로 연결된다.
...javascript
var k = parseInt("hello"); // <-- k = NaN;
var c = k + "World"; // <-- c = NaN + "World" = NaNWorld
-NaN 여부 검사하기-
...javascript
boolean isNaN(string)
...
Number함수나 parseInt 함수를 사용하기 전, 파라미터로 전달되는 문자열이 Number형식으로 변환 가능한지의 여부를 판단하는 함수
...javascript
var a = isNaN("hello"); // true (NaN이 맞음)
var b = isNaN("123"); // false (NaN이 아님)
...
값이 숫자 형식인 경우 true, 숫자 형식이 아닌 경우 false를 얻기 위해서는 isNaN함수의 리턴값을 "!"를 사용하여 부정해야 한다.
...javascript
var a = isNaN("hello"); // true (NaN이 맞음)
a = !a; // true를 부정하였으므로 false가 됨
...
일반적으로 위 결과는 다음과 같이 축약해 사용한다.
...javascript
var a = !isNaN("hello"); // false(숫자가 아님)
ex)
var height = prompt("cm단위의 키를 숫자만 입력하세요.", "");
if (isNaN(height)||height==""||!height) {
alert("올바른 입력값이 아닙니다.");
return;
}
---> height에 들어가는 값이 문자인 경우 isNaN(height)이 True가 되므로 alert를 실행
-메세지 박스 관련 함수-
...javascript
void alert(string)
...
- 확인 버튼을 갖는 알림 메시지 박스를 표시한다.
- 파라미터: 메시지 박스에 표시될 내용
...javascript
boolean confirm(string)
...
- 확인, 취소 버튼을 갖는 확인 메시지 박스를 표시한다.
- 파라미터: 메시지 박스에 표시될 내용
- 사용자가 긍정의 버튼을 클릭한 경우 true, 부정의 버튼을 클릭한 경우 false가 리턴된다.
ex)
var hello = confirm("확인 대화상자입니다."); / or [var hello = prompt("~를 입력하시오.", "");]
if (hello) {
...긍정을 선택한 경우...
} else {
...부정을 선택한 경우...
}
...javascript
string prompt("string msg", "string def")
...
msg: 메시지 박스에 표시될 내용
def: 입력필드에 설정될 기본값 (필요없는 경우 빈 문자열 ""을 지정)
-이벤트-
- 이벤트란 사용자가 웹페이지에서 행하는 어떤 행위(클릭, 마우스 이동, 드래그 등)나 웹 페이지가 겪는 일련의 사건(로딩완료, 다른 페이지로 이동)을 의미한다.
- 이벤트가 발생했을 때, 호출될 함수를 정의하고 연결하는 처리를 이벤트 처리라고 한다.
[대표적인 이벤트 종류]
이벤트 이름 | 설명
onMouseOver | 어떤 요소 위에 마우스 커서가 올라가 있는 경우
onMouseOut | 어떤 요소 위에서 마우스 커서가 벗어난 경우
onLoad | (body태그에 적용하여) 페이지의 로딩이 완료된 직후 (이미지나 문서, 프레임이 로드될 때)
[이벤트 사용 방법]
javascript 함수를 미리 정의해 두고 HTML태그의 속성형태로 이벤트 이름을 명시한 다음 함수의 호출구문을 속성에 대한 값으로 지정한다.
...javascript
function foo() {
alert("Hello World");
}
...
...html
<!--<태그이름 이벤트 이름="함수호출">-->
<input type="button" value="click" onClick="foo()" />
- 자바스크립트 구문과 HTML 태그의 id 속성값을 연결하는 명령어-
<span id="question"> ? </span>
document.getElementById("question").innerHTML = "50";
---> ? 가 50으로 바뀌어서 출력된다.
-Javascript 구문 특성-
- 브라우저는 HTML파일을 순서대로 읽는다.
- 소스 위치에 따라서 실행 시점이 달라진다.
Javascript는 <script>태그가 서로 분리되어 있어도 실행시에는 하나로 병합되어 동작한다.
...html
<html>
<head>
<script> var a = 10; </script>
</head>
<body>
<script> var b = 20; </script>
...
<script> var c = a+b; </script>
</body>
</html>
---> 스파게트 코드(지양해야 됨)
-소스코드 실행 시점-
HTML파일을 한 라인씩 해석하는 브라우저의 특성상 소스코드의 위치에 따라서 실행시점이 결정되므로 HTML 태그를 제어하고자 하는 경우 제어하려는 HTML 태그보다 소스코드가 나중에 명시되어야 한다.
* case1 - <body>태그 닫기 직전에 스크립트 코드 명시
...html
<body>
<div id="foo">...</div>
<script>
document.getElementById("foo").innerHTML = "Hello";
</script>
</body>
...
* case2 - <head>태그에 스크립트 코드가 함수 단위로 정의되는 경우
onload 이벤트를 통해서 해당 함수를 호출시킨다.
...html
<head>
<script>
function foo() {...}
</script>
</head>
<body onload="foo()">
-HTML 태그의 id 속성값 중복 금지!!!-
CSS에서는 id값이 중복될 경우 여러 요소에 대하여 동시에 적용이 가능하지만 JS의 경우는 id 속성이 중복될 경우 그 중에서 가장 첫 번째 요소만 인식하고 그 외의 요소들은 식별하지 못한다.
그러므로 HTML에서 id속성은 반드시 고유한 값을 사용해야 한다.
...html
<head>
<style>
/* 모든 id="hello"에 적용됨 */
#hello { color=red; }
</style>
<script>
function foo() {
//첫 번째 요소에만 적용됨
document.getElementById("hello").innerHTML="hello";
}
</script>
</head>
<body onload="foo()">
<div id="hello">...</div>
<div id="hello">...</div>
<div id="hello">...</div>
</body>
팁! : CSS에서는 클래스 속성만 사용하고, JS에서는 id 속성만을 사용한다.