키다리 개발자

Javacript란? (사용법, 주석, 변수, 타입변환, 문자열 연결) 본문

Javascript

Javacript란? (사용법, 주석, 변수, 타입변환, 문자열 연결)

JunBucks 2019. 10. 8. 17:33

JavaScript는 웹 페이지를 동적으로 만들어주는 언어로, 객체 기반의 스크립트 프로그래밍 언어입니다.


단순히 규격을 나타내는 HTML과 CSS와 달리, 변수와 함수 등이 존재하는 프로그래밍 언어입니다.

 

JavaScript를 줄여서 js라고 하며 파일 확장자는 .js를 사용합니다.

 

 

 

 

 

JS파일 사용법

 

CSS와 같이 Javascript 파일을 만들어 따로 분리하여 HTML과 연결시켜주는 방법이 있는데,

1
2
3
<head>
  <script src="./index.js"></script>
</head> 

이와 같이 <head>에 <script>로 js파일을 연결 시켜주는 방법이 있고

1
2
3
4
5
6
<body>
  <div>
    <span>배가본드</span>
  </div>
  <script src="./index.js"></script>
</body>

<body> 안에 내용 가장 밑줄에 사용하는 방법이 있습니다.

 

 

 

 

주석

 

주석 사용법 : 한줄인 경우 // 주석내용

                         여러 줄 일 경우  /* 주석내용 */

                         그리고 단축키는  ' Ctrl + / ' 를 사용하면 간편하다.

 

주석(comment)이란 개발자가 작성한 해당 코드에 대한 이해를 돕는 설명이나 디버깅을 위해 작성한 구문을 의미합니다.

 

또한 주석된 코드는 웹 브라우저에 의해 해석되지 않습니다.

1
2
3
4
5
6
7
function calculate() {
  var display = document.getElementById("display"); // 이렇게 코드의 이해를 위한 설명을 해줄 수 있으며,
  var result = eval(display.value);
  /* var displayResult = document.getElementById("result");
  displayResult.value = result; */                 // 여러줄의 코드를 주석처리 함으로 기능을 마비 시킬 수 있습니다.
  console.log(result);
}
 
 

 

 

 

 

 

변수

일반적으로 Javacript에서 변수를 사용할 때 var라는 키워드를 사용합니다.

 

var num;  // 변수를 선언

var num = 1;  // 선언과 동시에 초기화

 

var a, b;  //여러 변수를 선언

var c = 10, d = 20;  //여러 변수를 선언과 동시에 초기화

a = 5, b = 6;  //여러 변수를 한 번에 초기화

 

const num = 20

 

 

 

 

 

var, const, let
  • var : 매우 유연한 방식의 변수 선언 방식, 하지만 일부의 상황에서 오류가 있음.
  • const : 'constance'의 약자이며 상수를 선언, 한번 선언된 상수는 다시 재정의 할 수 없음.
  • let : 값을 재정의 할 수 있지만, var처럼 같은 변수를 두 번 선언하지 못함.

 

const, let은 ES6(ECMAScript6)의 문법이고, var는 ES6이전의 문법입니다.

 

const는 바뀌지 않는 값에,

 

let은 바뀔 수 있는 값에 쓴다고 이해하면 편합니다.

 

ES6에서는 var보다는 const와 let을 사용해서 좀 더 명확한 코드를 만들어 내는 것을 권장합니다.



 

 

 

타입 변환

Javacript에서는 변수의 타입이 숫자와 문자를 자동으로 변환하기 때문에 매우 유연합니다.

 

문자열을 사용할 때에는 '' 또는 ""을 열어주어야 합니다.

 

var a = 10;  // Number 타입의 10

 

var b= '안녕' // String 타입의 '안녕'

 

...

 

a = '십';  // String 타입의 "십"

 

b = 5;  // Number 타입의 5

 

 

 

 

문자열 연결

자바스크립트에서는 숫자와 문자열을 연결할 수 있습니다.

 

서로 다른 타입의 변수를 이어 붙여도, 변수를 강제로 문자열로 변형하여 이어 붙이게 됩니다.

 

연산자로 쓰이는 +가 두 문자열을 연결하는 기능을 수행합니다.

 

 

var a = 12345;

 

var b = '안녕하세요';

 

>a + b = 12345안녕하세요

 

> '사' + '과' = 사과

 

> '포도의 가격은 '+ 5000 + '원' = 포도의 가격은 5000원

 

> '사' + '과' + a + b = 사과12345안녕하세요

'Javascript' 카테고리의 다른 글

DOM의 개념, API, Rendering 이란?  (0) 2019.11.20
Facebook 만들기 (템플릿 문자열-Template string, 객체 배열, data model 속성 가져오기)  (0) 2019.10.24
Javascript (별, 왕관 찍기, 배열에 값 담기-push())  (0) 2019.10.24
Javascript + HTML + CSS 계산기 만들기  (0) 2019.10.08
Javascript 조건문, 반복문 (if,for)  (0) 2019.10.08
'Javascript' Related Articles more
Comments