- Javascript 사용 선언하기
- 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
- 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>
JavaScript 키워드
- 키워드는 변수 또는 함수의 이름으로 사용할 수 없습니다.
- 알아두면 유용한 키워드
- in : 객체에 속성이 존재하는지 확인 하는 키워드
- instanceof : 특정 클래스의 인스턴스인지 확인하는 키워드
- typeof : 자료형을 확인하는 키워드
- 사용에 주의를 주어야 하는 키워드
- with : 사용하지 않는 것을 권장
- Javascript 변수와 자료형
- 변수
- 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(){}; // objectJavascript 연산자
- 기본적으로 다른 언어 (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.")
}'웹개발 > javascript' 카테고리의 다른 글
| [자바스크립트] 일정한시간 간격으로 실행 (setInterval() 함수와 setTimeout()) (1) | 2018.01.04 |
|---|