티스토리 뷰

웹/JavaScript

[JavaScript]스크립트 영역 선언, 변수, 연산자

cll179 2018. 2. 8. 14:27

*해당 게시물은 XHTML 기준으로 포스팅되었습니다.

 

스크립트 영역 선언문

- <script></script> 태그를 이용해 스크립트영역을 선언한다.

- <head>영역이나 <body>영역 어디에 스크립트영역을 선언해도 상관없지만 일반적으로 <head>영역에 선언을 많이 한다.

 

선언 형식 :

<script type = "text/javascript">
        자바스크립트 실행문;

</script>

 

ex)

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns= "http://www.w3.org/1999/xhtml" lang = "ko" xml:lang = "ko">
    <meta http-equiv="content-type" content = "text/html; charset = utf-8"> 
    <title> 선언문 </title>
    <script type = "text/javascript">
        document.write("환영합니다.");
    </script>   
</head>
<body>
    
</body>
</html>
 cs

 

외부 스크립트 파일 연결

- 우리가 css파일을 외부에 따로 파일로 만들어 관리하는거 처럼 자바스크립트 파일을 따로 외부로 만들 수 있다.

- 소스 수정이나 관리하기 더 편해진다.

- 확장자는 .js 이다.

 

외부 파일 연결 형식 :

<script src = "소스경로"></script>

 

ex)

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns= "http://www.w3.org/1999/xhtml" lang = "ko" xml:lang = "ko">
<head>
    <meta charset = "utf-8">
    <title> 외부 파일 연결 </title>
    <script type = "text/javascript" src = "js/example.js"></script>   
</head>
<body>
 
</body>
</html>
 cs

 

 

 

변수

- 변수는 데이터(값)를 저장 할 수 있는 메모리 공간이다.
- 데이터 타입 종류로는 문자형(String), 숫자형(Number), 논리형(Boolean), Null형이 있다.

- 변수 선언은 var 키워드를 사용해야 한다.

 

형식 :

var 변수명;

var 변수명 = 값;

 

- 다음은 example 이라는 이름을 가진 변수에 100이라는 값을 대입한 예제이다.
- 변수에는 하나의 값만 저장 가능하며, 한번 수정하면 이전 데이터는 삭제되고 새로운 데이터가 저장된다.


ex)

var example;
example = 100;
example = 30;
document.write(example);

=> 30 출력

 


*문자형 데이터
- 문자형(String) 데이터는 문자나 숫자를 큰 따옴표("") 또는 작은 따옴표('')로 감싸고 있다.
- html 태그를 따옴표("") 안에 포함시키면 태그로 인식된다.

 

형식 :

var 변수명 = "사용할 문자나 숫자";

 

ex)

var s = "javascript";
var num = "100";
var tag = "<h1>String</h1>"; //출력하면 <h1>태그가 적용된 채로 출력된다.

*숫자형 데이터

- 숫자형(Number) 데이터는 변수에 저장된 데이터가 숫자만 들어가야 한다.
- Number("100")은 문자형 데이터 "100"을 숫자형 데이터로 바꿔주는 메서드이다.
- 큰따옴표 사용에 주의한다.

 

형식 :

var 변수명 = 숫자; or Number("숫자");

 

ex)

var s = 100;
var t = Number("500");

 

*논리형 데이터
- 논리형 데이터는 true와 false가 있다.
- Boolean() 내장 메서드에 데이터를 입력하면 true 또는 false를 반환한다.
- Boolean()에 입력하는 데이터 중 숫자 0과 null, undefined를 제외한 모든 반환 데이터는 true이다.

 

형식 :

var 변수명 = true or false; or Boolean(데이터);

 

ex)

var a = true;
var b = false;
var c = 10 > 1;
var d = Boolean(null);

 

document.write(a," ");   // true 출력
document.write(b," ");   // false 출력
document.write(c," ");   // true 출력
document.write(d," ");   // false 출력

 

*Null & undefined 데이터
- 변수에 아무 값도 할당하지 않은 경우를 Undefined라고 부른다.
- 변수에 null을 데이터로 넣은 경우를 Null 이라고 부른다.

 

형식 :


var s;
var t= null;

 

*typeof
- 지정한 데이터 또는 변수에 저장된 데이터 타입을 알고 싶을 때 사용한다.

 

형식:


typeof 변수 or 데이터;

 

ex)


//<![CDATA[
var num = 100;

var str = "자바스크립트"

document.write(typeof num,"<br/>"); // <br/>은 줄바꿈이다. number가 출력된다.
document.write(typeof str,"<br/>"); // string이 출력된다.
//]]>

 

*//<![CDATA[ //]]>
- 유효성 검사 시 태그들을 표준 문법으로 인식한다.
- 즉 HTML 내부에 자바스크립트를 작성할 때 태그를 사용하려면 CDATA 선언문을 작성해야 문법오류를 막을 수 있다.

 

*변수 선언 시 주의사항
- 변수명 첫 글자로는 &, _, 영문자만 올 수 있다. ex) var 123exam = 10; (X), var $exam = 10; (O)
- 변수명 첫 글자 다음은 영문자, 숫자, $, _, 숫자만 가능하다.
- 변수명을 예약어와 똑같이 선언 할 수 없다. ex) var document = 10; (X)
- 변수명 사용 시 대소문자를 구분한다.

 

연산자(다른 언어의 연산자파트와 겹치는 부분은 제외)

문자 결합 연산자
- 문자 결합 연산자는 피연산자가 문자형 데이터이다.
- 여러개 문자를 하나로 합칠 때 사용한다.

 

ex)

문자형 데이터 + 문자형 데이터 = 하나의 문자형 데이터
문자형 데이터 + 숫자형 데이터 = 하나의 문자형 데이터

 

ex)

var t1 = "안녕";
var t2 = "하세요";
var t3 = "123";
var t4 = "반갑습니다";
var result;

result = t1+t2+t3+t4;

document.write(result); // 안녕하세요123반갑습니다 출력

 

*문자나 데이터를 태그로 결합하기

- 태그를 결합연산자로 연결이 가능하다.

 

ex)

var t = "<table border='1'>";
t += "<tr>";
t += "<td>1</td><td>2</td><td>3</td>";
t += "</tr>";
t += "</table>";

document.write(t);// t=<table border = '1'><tr><td>1</td><td>2</td><td>3</td></tr></table>이 저장된다.

 

*증감 연산자


var A = ++B //변수 B의 데이터를 1 증가시킨 후 변수 A에 저장한다.
var A = B++ //변수 A에 변수 B의 데이터를 저장한 후 변수 B의 데이터를 1 증가시킵니다.

 

*비교 연산자
A==B, A!=B

ex)

var a = 10, b = "10";
a == 10 // true
b == 10 // true
- 데이터형이 비교연산자 실행 결과에 영향을 미치지 않는다.

 

A===B, A!==B

ex)

var a = 10, b = "10";
a === 10 //true
b === 10 // false
- 데이터 형에 따라 결과 값이 달라진다.

 

적정 체중 구하기 예제

- prompt()메서드를 사용하면 방문자에게 질문과 응답을 받을 수 있다.
prompt() 사용 형식:

prompt("질문","응답창에 나올 값");

 

코드:

var height = prompt("당신의 키는 ?","0");

var result = (height - 100) * 0.9;

document.write(result);

 

 

※
본 게시물은 개인적인 용도로 작성된 게시물입니다. 이후 포트폴리오로 사용될 정리 자료이니 불펌과 무단도용은 하지 말아주시고 개인 공부 목적으로만 이용해주시기 바랍니다.

※

저작자표시 비영리 변경금지

'웹 > JavaScript' 카테고리의 다른 글

[JS] 생성자패턴  (0) 2018.09.02
[JavaScript]자바스크립트 변수-연산자-타입  (0) 2018.05.27
[JavaScript]조건문, 반복문 예제, 내장객체  (1) 2018.02.09
댓글