Javascript 3일차 요점정리
내장함수
자주 사용되어지는 공통 기능들에 대하여 미리 구현되어진 함수. 웹 브라우저에 미리 내장되어 있으므로 개발자는 함수의 정의 없이 함수를 호출하고 적절한 리턴값을 받아 활용할 수 있다.
문자열에 대한 숫자, 수식 변환
Number eval(string)
- 주어진 수식 형태의 문자열을 실제로 계산한 결과값을 리턴한다.
Number Number(string)
- 주어진 숫자 형태의 문자열을 Number타입의 값으로 변환하여 리턴한다. 정수와 실수를 모두 지원한다.
Number parseInt(string)
- 주어진 숫자 형태의 문자열을 Number타입의 값으로 변환하여 리턴한다. 정수만 지원한다. 문자열이 실수 형태인 경우 소수점 아래 부분은 잘라낸다.
참고 : 주어진 문자열을 무조건 실수 형태로만 리턴하는 함수는 parseFloat(string)이다. 예를 들어 파라미터로 "1"이 전달될 경우 1.0이 리턴된다.
NaN (Not a Number)
- Number 형식으로 변환할 수 없는 값을 Number 함수나 parseInt 함수로 변환하려고 한 경우 리턴되는 값
- 전염성이 매우 강해서 한번 NaN으로 결정된 값에는 어떤 수를 연산시키건 결과가 NaN이 된다.
var k = parseInt("hello"); // <-- k = NaN;
var c = k + 100; // <-- c = NaN + 100 = NaN
문자열과 결합할 경우 서로 연결된다. [문자열 전염성이 최고]
var k = parseInt("hello"); // <-- k = NaN;
var c = k + "world"; // <-- c = NaN + "world" = "NaNworld";
NaN여부를 검사하기
boolean isNaN(string)
- Number함수나 parseInt함수를 사용하기 전, 파라미터로 전달되는 문자열이 Number 형식으로 변환 가능한지의 여부를 판단하는 함수
var a = isNaN("hello"); // true (NaN이 맞음)
var b = isNaN("123"); // false (NaN이 아님)
값이 숫자 형식인 경우 true, 숫자형식이 아닌 경우 false를 얻기 위해서는 isNaN 함수의 리턴값을 !를 사용하여 부정하면 된다.
var a = isNaN("hello"); // true (NaN이 맞음)
a = !a; // true를 부정하였으므로 false가 됨
일반적으로 위 결과는 다음과 같이 축약해서 사용한다.
var a = !isNaN("hello"); // false (숫자가 아님)
메시지 박스 관련 함수
void alert(string)
확인 버튼을 갖는 알림 메시지 박스를 표시한다.
파라미터 : 메시지 박스에 표시될 내용
boolean confirm(string)
- 확인, 취소 버튼을 갖는 확인 메시지 박스를 표시한다.
- 파라미터 : 메시지 박스에 표시될 내용
- 사용자가 긍정의 버튼을 클릭한 경우 true, 부정의 버튼을 클릭한 경우 false가 리턴된다.
string prompt(string msg, string def)
- 입력필드를 갖는 메시지 박스를 표시한다.
- 파라미터
msg : 메시지 박스에 표시될 내용
def : 입력필드에 설정될 기본값(필요없는 경우 빈문자열 ""을 지정)
- 리턴값
입력하지 않고 확인을 누른 경우 : ""
취소를 누른 경우 : null
정상적인 값을 입력한 경우 : 입력한 내용
=> 예외사항을 없애기 위해 if문에서 변수 자체를 !로 부정하면 ""과 null을 모두 포함 가능
이벤트(event)
- 이벤트란 사용자가 웹 페이지에서 행하는 어떠한 행위나 웹 페이지가 겪는 일련의 사건
행위 : 클릭, 마우스 이동, 드래그 등
사건 : 로딩완료, 다른 페이지로 이동 등
- 이벤트가 발생했을 때 호출될 함수를 정의하고 연결하는 과정을 이벤트 처리라고 한다.
대표적인 이벤트 종류
onClick 어떤 요소를 클릭한 경우
onMouseOver 어떤 요소 위에 마우스 커서가 올라가 있는 경우
onMouseOut 어떤 요소 위에 마우스 커서가 벗어난 경우
onLoad (body 태그에 적용하여) 페이지 로딩이 완료된 직후
이벤트 사용 방법
javascript 함수를 미리 정의해두고 HTML 태그의 속성형태로 이벤트 이름을 명시한 다음
함수의 호출구문을 속성에 대한 값으로 지정한다.
function foo() {
alert("Hello world");
}
<!-- <태그이름 이벤트이름="함수호출"> -->
<input type="button" value="click" onClick="foo()">
Javascript 구문 특성
Javascript는 <script> 태그가 서로 분리되어 있어도 실행시에는 하나로 병합되어 동작한다.
<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> 태그 닫기 직전에 스크립트 코드 명시
<body>
<div id = "foo">...</div>
<script>
document.getElementsById("foo").innerHTML = "hello";
</script>
</body>
그러나 이렇게 작성하는 경우 스파게티 코드가 되어 가독성, 유지보수에서 좋지 않다.
case2 - <head> 태그에 스크립트 코드가 함수 단위로 정의되는 경우
onload 이벤트를 통해서 해당 함수를 호출시킨다.
[브라우저가 HTML태그 전체를 인식할 때까지 스크립트 실행을 기다려야 하기 때문.]
<head>
<script>
function foo() { ... }
</script>
</head>
<body onload = "foo()">
</body>
HTML 태그의 id속성값 중복 금지!!!!
CSS에서는 id값이 중복될 경우 여러 요소에 대하여 동시에 적용이 가능하지만,
JS의 경우는 id속성이 중복될 경우 그 중에서 가장 첫 번째 요소만 인식하고 그 외의 요소들은 식별하지 못한다.
그러므로 HTML에서 id속성은 반드시 고유한 값을 사용해야 한다.
<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속성만을 사용한다.
'Web 관련' 카테고리의 다른 글
| Javascript+jQuery+Ajax 5일차 (0) | 2019.01.30 |
|---|---|
| Javascript+jQuery+Ajax 4일차 (0) | 2019.01.30 |
| Javascript 오답노트 (0) | 2019.01.28 |
| Javascript+jQuery+Ajax 2일차 (0) | 2019.01.28 |
| Javascript 1일차 요점 정리 (0) | 2019.01.25 |