'웹개발 > jQuery' 카테고리의 다른 글

[jQuery] 체크박스 전체선택/전체해제 일괄처리 예제  (0) 2018.04.10
  • 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
1
2
3
4
5
6
7
8
9
10
11
$.ajax({
  url: "http://fiddle.jshell.net/favicon.png",
  beforeSend: function( xhr ) {
    xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
  }
})
  .done(function( data ) {
    if ( console && console.log ) {
      console.log( "Sample of data:", data.slice( 0, 100 ) );
    }
  });
cs


url : 요청을 보내는 URL이 포함된 문자열


1
2
3
{"updateList":[{"PNO":"202","PNAME":"LG전자 로보킹 R76","PIMG":"http://img.danawa.com/prod_img/500000/567/451/img/4451567_1.jpg?shrink=160:160","PURL":"http://prod.danawa.com/info/?pcode=4451548&keyword=로봇청소기","UPRICE":"50000","TYPE":"down"},
                {"PNO":"201","PNAME":"샤오미 스마트 로봇 청소기","PIMG":"http://img.danawa.com/prod_img/500000/478/541/img/4541478_1.jpg?shrink=160:160","PURL":"http://prod.danawa.com/info/?pcode=4541417&keyword=로봇청소기","UPRICE":"50000","TYPE":"up"},
                {"PNO":"186","PNAME":"대유위니아 딤채 EDT33BFRMTT (2018년형)","PIMG":"http://img.danawa.com/prod_img/500000/199/508/img/5508199_1.jpg?shrink=160:160","PURL":"http://prod.danawa.com/info/?pcode=5508199&keyword=김치냉장고&cate=102122","UPRICE":"50000","TYPE":"up"}]}
cs


'웹개발 > Spring' 카테고리의 다른 글

[Spring] Quartz Scheduler Tutorial-3  (0) 2017.12.28
[Spring] Quartz Scheduler Tutorial-2  (0) 2017.12.20
[Spring] Quartz Scheduler Tutorial-1  (0) 2017.12.19
[JSP] JSTL 과 EL 간단 정리 (세션처리)  (0) 2017.12.15
[Spring] mvc mybatis 오라클 데이터베이스 연결 설정  (0) 2017.12.13

+ Recent posts

티스토리툴바