IT Log

JavaScript (1) 본문

JavaScript

JavaScript (1)

newly0513 2020. 6. 3. 17:30
728x90
반응형

JavaScript

  • 객체(Object) 기반의 스크립트 프로그래밍 언어
  • 웹 브라우저 내에서 주로 사용
  • 다른 응용프로그램의 내장 객체에도 접근할 수 있는 기능
  • Node.js와 같은 런타임 환경과 같이 서버 측 네트워크 프로그래밍에도 사용
  • Java와는 구문이 유사할 뿐, 관련성이 없는 다른 언어
  • HTML의 내용 / 속성 / 스타일을 변경

JavaScript 태그

  • HTML에서 JavaScript는 <script> 와 </script> 사이에서 작성
  • HTML 어디서나 작성 가능하지만, <head> 또는 <body> 부분에서 작성
  • script 태그의 속성으로는 type 또는 src 가 주로 사용
    • type : 현재 사용중인 스크립팅 언어를 나타내기 위해 권장
    • src : 외부 스크립트 파일을 사용할 때 작성

      ※ 외부 스크립트를 사용하면 HTML과 코드가 분리되어 가독성과 유지관리가 좋고, 페이지 load 속도가 향상

# 작성예시

<html>
  <head>
    <script src = "external.js" type = "text/javascript">
      // 실행될 내용
    </script>
  </head>
  <body>
    <script type = "text/javascript">
      // 실행될 내용
    </script>
  </body>
</html>


* src 작성되는 파일명은 'path/파일명' 으로 현재 작성중인 파일 위치를 기준으로 하여 작성한다. 예를 들어 
'/첫번째/두번째/세번째' 이러한 폴더 구조가 있다면

1) 현재 두번째 폴더위치에서 파일을 작성중이고, 세번째 폴더에 있는 파일을 불러오는 경우
  <script src = "세번째/파일명" type = "text/javascript">
    
2) 현재 두번째 폴더위치에서 파일을 작성중이고, 첫번째 폴더에 있는 파일을 불러오는 경우
  <script src = "/첫번째/파일명" type = "text/javascript">
  또는
  <script src = "../파일명" type = "text/javascript">
  
3) 현재 두번째 폴더위치에서 파일을 작성중이고, 두번째 폴더에 있는 파일을 불러오는 경우
  <script src = "파일명" type = "text/javascript">

Variable

  • 데이터 값을 저장하기 위한 컨테이너
  • 'var'를 사용하여 변수를 선언
  • 변수를 재선언할 수 있으며, 재선언 시 값이 손실되지 않음
  • 선언 후 변수 값은 없으며, '='를 사용하여 값을 할당
  • 쉼표로 구분하여 한 줄에 많은 변수를 선언 가능, 여러 줄에 걸쳐서도 가능
  • 변수에 값을 저장하는 것을 '변수 초기화'라고 함
  • 전역 변수 사용을 최소화하고, 지역변수는 var 또는 let으로 선언
  • 변수는 초기화하여 상단에 선언하는 것이 좋음
  • 변수를 객체로 선언하면 실행속도가 느려지므로 지양할 것
  • 변수는 자동으로 데이터 타입이 변환되므로 입력에 주의
  • 함수 선언 시 매개변수 기본값 사용

Variable 범위

 

  • 전역 변수 : JavaScript 어느 곳에서나 정의
  • 지역 변수 : 정의된 함수 내에서만

    ※ 변수의 이름이 같은 경우, 지역 변수가 우선된다.

# 변수 선언 예시
var first;				// 변수 선언
var first = 1;				// 변수 초기화
var first = "1";
var first = '1':
var first = 1, second = 2, third = 3;	// 한 줄에 많은 변수 선언
var first = 1, 
second = 2, 
third = 3;				// 여러 줄에 걸쳐 변수 선언

<html>
   <body>   
      <script type = "text/javascript">
        var vari = "global";      
        function local( ) {
          var vari = "local";    
          document.write(vari);
        }         
      </script>     
   </body>
</html>
// 함수 적용 시 지역 변수가 우선되어 local이 출력됨

Variable 이름

 

  • 문자 또는 $나 _로 시작할 수 있으나, 숫자로는 불가
  • 대소문자를 구분하며, 예약어는 선언 불가

예약어

abstract else instanceof switch boolean enum
int synchronized break export interface this
byte extends long throw case false
native throws catch final new transient
char finally null true class float
package try const for private typeof
continue function protected var debugger if
return volatile delete implements static with
double in super goto public void
default short while do import  

연산자

  • 산술 연산자
  • 비교 연산자
  • 논리 연산자

산술 연산자

연산자 설명
+ 더하기
- 빼기
* 곱하기
** 지수
/ 나누기
% 나머지
++ 증가
-- 감소

비교 연산자

연산자 설명
== 같다
=== 값과 타입이 같다
!= 같지 않다
!== 값이나 타입이 같지 않다
> 보다 크다
< 보다 작다
>= 크거나 같다
<= 작거나 같다
? 조건 ? 참 : 거짓

논리 연산자

연산자 설명
&& 모두 참
|| 하나는 참
! 참은 거짓, 거짓은 참

비트 연산자

연산자 설명
& AND연산
| OR연산
~ NOT
^ XOR
<< 왼쪽 Shift
>> 오른쪽 Shift
>>> 0으로 오른쪽 Shift, >>와 동일

할당 연산자

연산자 설명
= x = y
+= x += y와 x = x + y가 동일
-= x -= y와 x = x - y가 동일
*= x *= y와 x = x * y가 동일
/= x /= y와 x = x / y가 동일
%= x %= y와 x = x % y가 동일
**= x **= y와 x = x * y가 동일

 

typeof 연산자

연산자 설명
typeof 변수의 타입을 반환
728x90
반응형

'JavaScript' 카테고리의 다른 글

jQuery Tutorial (3)  (0) 2020.06.09
jQuery Tutorial (2)  (0) 2020.06.09
jQuery Tutorial (1)  (0) 2020.06.08
JavaScript (3)  (0) 2020.06.08
JavaScript (2)  (0) 2020.06.05
'JavaScript' Related Articles more
Comments