# Javascript 사용 목적

   - javascript 를 사용하는 이유는 <body> 안의 어떤 태그를 사용자의 이벤트에 반응할 수 있도록 제어하기 위함이다.

   - HTML 태그요소 제어? 

     : 해당 태그의 시작과 끝 사이에 어떤 내용을 새롭게 지정하거나 기존 내용을 삭제하는 것 의미.





# Javascript 내장 함수


1. Javascript 내장 함수?


   : 웹 페이지 작성 시 사용되는 보편적인 기능들을 웹 브라우저 개발사에서 미리 정의하여 웹브라우저 안에 내장해 놓은 함수.


2. 주요 내장 함수

 

 Number(문자열)

 주어진 문자열의 변수를 실제 숫자형으로 변환 

 isNaN(문자열)

 주어진 문자열이 숫자로 변환 할 수 없는 문자열인 경우 true, 숫자로 변환 가능한 경우 false 반환 

 **   NaN: Not a Number

 parseInt(문자열)

 주어진 문자열 변수를 실제 숫자형으로 변환 

 confirm(문자열)

 확인/취소 대화창 표시 

 ** Number() 와 parseInt() 차이

    : 대부분 동일한 결과를 리턴하지만, 실수 형태를 반환할 경우 서로 다른 결과를 리턴한다. (parseInt는 정수형만 다룬다)

    : Number ("100.1") --> 100.1

      parseInt("100.1") --> 100  


3. Javascript 에서의 Id 속성
    - 여러 개의 id 값이 중복될 경우 javascript에서는 가장 첫번째 요소에게만 동작한다.
       --> document.getElementById("");


4. Javascript 내장 객체

   4.1 값 처리 위한 내장객체

   

 Date

 시스템의 현재 날짜 시작 조회 및 계산 기능 제공 

  - 주의: javascript 에서는 월에 대한 값이 0부터 시작됨. 원하는            날짜에서 한 달 작은 값 설정 필요

  - 현재날짜 출력: getFullYear(), getMonth() + 1, getDate()

  - 현재시간 출력: getHours(), getMinutes(), getSeconds()

 Array 

 배열에 관련된 기능 제공 

  - var arrayTest = new Array();

  - var arrayTest = [ ] ;

  - Java와 다르게 javascript는 배열의 크기가 유동적으로 변화       가능하다

 String

 문자열 객체 제공 

 Math 

 삼각함수, 지수, 로그 등 수학과 관련된 각종 고급 함수 제공 

  - int round( ): 반올림

  - int floor( ): 소수점 이하 값 버림

  - int ceil( ): 소수점 이하 값 올림


    4.2 값 처리 위한 내장객체


 window

 브라우저 창에 대한 모든 상황을 제어하는 최상위 객체. javascript의 모든  브라우저 제어 관련 내장객체는 window 객체의 하위에 존재한다. 

  - window 객체 명시하는 것은 생량 가능하다. 

    원래는 window.내장객체이름.함수이름(); 호출하는 것이 정식.

  - window.open("페이지URL") : 새로운 탭 오픈

  - window.close()  혹은 self.close() : 현재 창 닫기

 location 

 url 정보를 제어하는 개체. 페이지 이동, 현재 주소 조회, 새로 고침 등의  기능을 제공한다.

  - 속성: href, host, hostname, port, pathname, protocol, search 

           (search: url에 포함된 파라미터 조회) 

  - location.reload() : 페이지 새로고침

 history 

 웹 블우저에 기록되어 있는 히스토리 정보 제어 

  - 브라우저의 뒤로/앞으로 버튼 기능 수행 객체

  - back(), forward() 함수 내장

  - history.back() : 이전 페이지로 이동하기

 navigator 

 브라우저 종류 판별 및 브라우저 정보 조회

  - 속성: appName, platform, userAgent, appVersion

           (appName: 브라우저 이름, platform: 브라우저 설치된 시스템 환경, userAgent: 웹 브             라우저의 종류와 버전, appVersion: 웹 브라우저의 버전)



    4.3  HTML 문서를 제어하기 위한 내장객체


 document

 문서에 대한 정보, 즉 HTML 문서의 각 요소들을 제어하기 위한 기능. javascript 의 핵심객체!!

 form 

 입력양식 컴포넌트를 위한 개별 객체 포함 






__________________________________________________________________________________________________________________________________________________________

** 본 포스팅에 대해 수정해야할 부분이나 추가 의견 등이 있으신 분들은 댓글 달아주세요. 언제나 환영입니다 :) 

** 본 포스팅은 아래의 reference 들을 참고하여 내용을 덧붙인 글입니다. 혹시, 문제가 되는 경우 알려주시면 조치하도록 하겠습니다.

** 본 포스팅을 reference 자료로 참고하실 분들은 출처를 꼭 밝혀주시기 바랍니다.


  - 책: [Javascript, jQuery, Ajax 완벽가이드], 저자: 주영아 이광호, 출판사: Interpress




저작자표시 비영리

'UX' 카테고리의 다른 글

[WebSquare5] 웹스퀘어5 연동  (0) 2017.04.29
AJAX 통신 기초  (0) 2017.02.26
jQuery 기초  (0) 2017.02.26
Javascript 기초  (0) 2017.02.26
[Error] maven 프로젝트 checkout 후 JSP 파일 에러  (0) 2017.01.29

프로젝트 하면서 javascript를 썼는데, 기초 내용도 탄탄히 안다지고 무작정 이렇게 쓰면 되는구나~ 하고 썼던 것 같아 

기초 내용을 정리해두려한다. 틈틈히 몰랐던 내용 정리해놔야지~~



1. JavaScript 기초


1.1 DTD 선언


    - HTML5 버전에 들어서면서 DTD 선언문이 간략화 되었다.


      * 기존(XHTML1.0) : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN"

                               "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


      * 현재(HTML5) : <!DOCTYPE html>

                          

    - DTD 선언은 HTML 페이지의 가장 첫 라인에 명시되어야 한다. 웹 브라우저가 HTML의 버전을 인식하고 HTML 태그나 CSS를 해당 버전에 

      맞도록 처리하기 때문. DTD 선언문은 웹 표준 준수를 위하여 반드시 명시되어야 한다!



1.2 파일 인코딩 형식 


     - HTML5 버전에 들어서면서 파일 인코딩 지정 방식도 간략화 되었다.


       * 기존(XHTML1.0) : <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


       * 현재(HTML5) : <meta charset="utf-8" />



       ** 인코딩(Encoding): 어떤 파일이 저장되는 방식. 한국어 처리를 위한 "euc-kr", 다국어 처리를 위한 "utf-8" 이 있다. 

                                   ajax에서는 "euc-kr" 형식을 지원하지 않기 때문에 최근 웹 페이지 제작은 대부분 "uft-8"을 사용한다.



1.3 HTML 페이지 내 Javascript 코드 포함


     - Javascript 블록은 <script> 태그로 정의되며 구문의 종류를 의미하는 type = "text/javascript" 속성이 함께 명시된다. 


     - HTML 코드 안에 javascript 포함시키는 다른 방법은, javascript 명령문을 js 파일에 별도로 작성해 두고, HTML이 이 js 파일 내용을 

       참조하도록 설정해주는 것.

       --> javascript 구문을 외부 js 파일 형태로 작성하게 되면 하나의 js 파일을 여러 HTML에서 참조 할 수 있기 때문에 javascript를 재사용

            할 수 있다는 이점이 있다.


 <script type="text/javascript" src="js 파일경로"></script>


     ** html 코드 다음에 javascript 블록을 넣어주는 것 을 권장한다. 페이지 로딩 시, 위에서부터 소스코드를 읽어들이는데, 이때 자바스크립트에 

        오류 코드가 있으면 html 소스를 읽기 전에 에러가 떠, 화면 로딩 조차 되지 않기 때문이다.  화면은 기본으로 띄워주고 자바스크립트에 오류가 있을         경우 오류 메세지를 띄워주는게 낫겠죠 ㅎㅎ

     


1.4 Javascript 주석


    - 한 줄 주석: //

    - 여러 줄 주석: /*   */



1.5 console 사용

 

    - console.log("출력내용");


   ** 결과 확인은 브라우저의 확인 대화상자 호출(alert())



1.6 변수 데이터 타입 종류

     

 Number

 숫자 표현. 산술 연산에 사용 

 String

 문자열 표현.  

 Boolean

 true / false 

 Object

 객체 저장 하기 위한 데이터 타입. 브라우저 제어 기능, form 제어 기능,

 html 태그 요소에 대한 제어가 가능하다 

 Null 

  

 undefined

 변수만 선언되고 아무런 값도 할당되지 않은 상태. 

 ** Javascript 에서는 일반적인 프로그래밍언어와 달리 변수 선언할 때는 변수 존재 여부와 범위     만 결정되고, 변수의 자료형은 값을 할당 할 때 자동으로 결정된다!




__________________________________________________________________________________________________________________________________________________________

** 본 포스팅에 대해 수정해야할 부분이나 추가 의견 등이 있으신 분들은 댓글 달아주세요. 언제나 환영입니다 :) 

** 본 포스팅은 아래의 reference 들을 참고하여 내용을 덧붙인 글입니다. 혹시, 문제가 되는 경우 알려주시면 조치하도록 하겠습니다.

** 본 포스팅을 reference 자료로 참고하실 분들은 출처를 꼭 밝혀주시기 바랍니다.


  - 책: [Javascript, jQuery, Ajax 완벽가이드], 저자: 주영아 이광호, 출판사: Interpress


저작자표시 비영리

'UX' 카테고리의 다른 글

[WebSquare5] 웹스퀘어5 연동  (0) 2017.04.29
AJAX 통신 기초  (0) 2017.02.26
jQuery 기초  (0) 2017.02.26
Javascript 기초2  (0) 2017.02.26
[Error] maven 프로젝트 checkout 후 JSP 파일 에러  (0) 2017.01.29

+ Recent posts

티스토리툴바