JavaScript 정리 01

31 Jan 2019

Reading time ~2 minutes

JavaScript 정리 01 - JavaScript

JavaScript

1996년 Brendan Eich가 개발하여 발표한 Script 언어
- VB Script : VB 기반
- JavaScript : C 기반
- ActionScript .. 등등
- HTML에 정의하여 사용하는 언어
- Mocha -> LiveScript -> JavaScript로 이름이 바뀌었다.
inline 방식, embed 방식, external file 방식으로 사용가능
줄 단위로 실행하여 Error가 발생하게 된다.
- 브라우저 개발자도구(insepector)에서 에러를 확인하여 처리한다.
library가 많이 개발되어 있다.
- jQuery, NodeJS, AngularJS, ViewJS, ReactJS…
이클립스에서 ctrl+space로 자동완성 기능(Proposal(Content Assist))이 안되므로 플러그인을 설치해야 한다.
JavaScript는 객체기반 언어
- 객체 기반 언어 - 클래스를 안만들고 만들어진걸 사용하는 언어
  - 프로그래머가 객체를 생성하기보다 생성된 객체들을 주로 사용하는 언어
- Java는 객체지향언어
  - 객체지향언어 - 가급적이면 클래스를 만들어서 사용하는 언어
동적인 데이터형
- 값이 할당될 때 데이터형이 정해지는 데이터형

var i;

대소문자를 가린다.
줄 마지막에 ’;’을 사용하지 않아도 된다.
JS에선 문자가 없다. 모두 문자열
- 때문에 ‘나 “나 가리지 않음
”//” 한줄 주석과 “/* */” 여러 줄 주석을 사용가능
JS에선 window가 최상위 객체(생략가능)
- 자바에선 Object가 최상위 객체

inline 방식

태그에 넣어 작성하는 방식
우선순위가 가장 높다.
코드 중복성이 가장 높음

<태그명 onOOO="코드" />

inline방식으로 alert창 띄우기

<div id="container">
     <input type="button" value="버튼" class="btn"  onclick="alert('인라인방식')"/>
</div>

embed 방식

head 태그안에 script 태그로 정의하는 방식

<html>
    <head>
        <title>타이틀</title>
        <script type="text/javascript">
            코드작성
        </script>
    </head>
    <body>
        ...
    </body>
</html>

embed 방식으로 alert창 띄우기

</style>
<script type="text/javascript">
     function test() {
           alert("embed 방식");
     }
     
     test();
</script>
</head>

external file 방식

파일을 따로 정의하여 작성하는 방식
- jQuery등 외부 라이브러리를 사용할 때 많이 사용
.js파일을 생성하고 코드를 정의하는 방식
필요한 HTML에서 script 태그를 정의

<script type="text/javascript" src="js url"></script>

external file 방식으로 alert창 띄우기

// external.js
function ext() {
     alert("외부파일 방식");
}

</style>
<script type="text/javascript" src="external.js"></script>
<script type="text/javascript">
     ext(); // 외부파일에 있는 함수 호출
</script>
</head>

error를 발생시켜보기

<script type="text/javascript">
     function test() {
           alerdt("embed 방식"); // 오타 내기
     }
     test();
</script>

출력

body 태그안에 출력
- window는 생략가능

window.document.write("출력할내용");

경고창 출력
- alert은 코드의 실행을 멈춘다.
  - 디버깅 시 많이 사용

alert("출력할 내용");

콘솔 출력
- 출력을 숨겨서 하거나 디버깅 시 사용

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

document.write()로 출력 해보기
- window는 생략가능
- document.write()는 거의 안쓴다.
  - 기존 body내용을 모두 지우고 쓴다…
- script 태그내의 영역은 javascript 코드만 작성가능

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
     // <script>태그 내의 영역은 JavaScript코드만 작성할 수  있다.
     // HTML 코드를 직접 사용하면 Error
     // HTML <body>에 출력
     window.document.write("안녕 자바스크립트^^<br/>");
     window.document.write("난 김정윤이라고해");
     
     // 경고창 출력
     alert("경고창 출력\n난 김희철이라고 해 "); // 코드의  실행을 멈춘다.
     
     // 콘솔 출력
     console.log("콘솔출력");
     
</script>
</head>
<body>
</body>
</html>

JavaScript