• 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(){}; // object


  • Javascript 연산자

  - 기본적으로 다른 언어 (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

+ Recent posts

티스토리툴바