- Javascript 는 HTML 문서 내 <script></script> 태그로 사용을 선언하고 태그 안에 코드를 작성합니다.
<script type="text/javascript">
/* Javascript 코드 작성 */
</script>
- <script></script> 태그 선언 위치
- 전통적인 방법으로는 <head></head> 안에 선언합니다.
- 페이지의 렌더링 지연을 막기 위해 <body></body> 안에서 가장 하단에 선언 하기도 합니다.
- <body> 안의 요소들을 조작하는 경우 <head> 선언 또는 조작하고자 하는 요소보다 먼저 선언 하는 경우 원하는 동작을 하지 않을 수도 있습니다.
- 태그 선언 위치에 따른 동작 예시
<html>
<head>
<script type="text/javascript">
document.getElementById("txt1").value = "Did value change?";
</script>
</head>
<body>
<input type="text" id="txt1" value=""/>
</body>
</html>
<html>
<head>
</head>
<body>
<input type="text" id="txt1" value=""/>
<script type="text/javascript">
document.getElementById("txt1").value = "Did value change?";
</script>
</body>
</html>
- JS 파일 작성하기
- 확장자는 : .js
- JS 파일에는 <script></script> 선언을 하지 않습니다.
- JS 파일 로드하기
- JS 파일을 사용하고자 하는 페이지에서 <script></script> 태그의 src 속성을 활용합니다.
- JS 파일을 로드 한 <script></script> 태그의 내부 javascript는 무시됩니다.
/* test.js */
alert("test.js alert!");
<!-- test.html -->
<html>
<head>
<script type="text/javascript" src="./test.js">
alert("test.js alert!"); // 이 스크립트는 실행되지 않습니다.
</script>
</head>
<body>
</body>
</html>
- 키워드는 변수 또는 함수의 이름으로 사용할 수 없습니다.
- 알아두면 유용한 키워드
- in : 객체에 속성이 존재하는지 확인 하는 키워드
- instanceof : 특정 클래스의 인스턴스인지 확인하는 키워드
- typeof : 자료형을 확인하는 키워드
- 사용에 주의를 주어야 하는 키워드
- 변수
- var 키워드 사용하여 선언합니다.
- 변수 선언 시 명시적인 자료형이 없습니다.
- = 연산자로 변수에 값을 할당 합니다.
var id = 10; // number 타입의 변수 값 10 선언
alert(id); // 10 출력
id = "ten"; //string 타입의 값 ten 으로 변수 값 변경
alert(id); // ten 출력
- 자료형
undefined : 변수 선언만 하고 아무런 값을 할당 하지 않은 경우
null : 변수에 값이 없음을 명시적으로 할당한 경우
boolean
number :NaN 객체도 Number 타입
string
object
var variable1; // undefined
variable1 = null;
variable1 = false; // boolean
variable1 = 1; // number
variable1 = "one"; // string
variable1 = function(){}; // object
- 기본적으로 다른 언어 (C, Java 등)와 동일한 연산자를 사용하므로 따로 기능을 설명하지 않겠습니다.
- ==, != 의 특수한 경우
null == undefined // true
"NaN" == NaN // false
10 == NaN // false
NaN == NaN // false
NaN !=NaN // true
false == 0 // true
true == 1 // true
true == "1" // true
true == 2 // false
undefined == 0 // false
null == 0 // false
"1" == 1 // true
- ==, != 비교와 ===, !== 비교의 차이
==, != : 두값의 값만을 비교하여 true 또는 false 를 반환합니다.
===, !== : 두 값과 데이터 타입을 모두 비교하여 true 또는 false 를 반환합니다.
null === undefined // false
true === 1 // false
"1" === 1 //false
- ! 연산자를 활용한 undefined, null, empty 체크
if 문의 조건으로 변수를 지정할 경우 null, undefined, NaN, "", 0, false 의 경우 false 나머지 값에 대해 true를 반환합니다.
var id = "";
if( !id ) {
alert("id is empty.")
}
PLSQL_Beautifier.br