Web개발/JavaScript

[JavaScript] 자바스크립트 기초 문법 1

noobdev 2019. 11. 14. 20:01

자바스크립트는 html/css로 만들어진 정적인 웹을 동적으로 제어할 때 사용하는 언어이다.

html문서나 jsp문서등에서 쓰이는 언어이다.

프론트엔드를 지향하는 개발자에게는 필수적인 언어로써 배워둔다면 굉장히 도움이 되는 언어이다.

JQuery ,  Vue.js, React, Angular.js 등등 많은 프레임워크가 있다.

 

 


▶ 자바스크립트 선언문

<script>
      자바스크립트 코드;
</script>

자바스크립트의 선언문은 <head> 태그 영역 또는 <body> 태그 영역 안에 <script> 소스코드;</script> 이렇게 선언한다.

우리나라의 대부분의 개발자는 <head>태그 영역에 선언하고 있다.

 


▶ 자바스크립트 주석 

// 한 줄 주석인 경우


/*
여러줄 주석인 경우
*/


<!-- html 소스의 주석 -->

 

  • 한 줄 주석인 경우 //를 사용
  • 여러 줄 주석인 경우 /*  */ 를 사용
  • html 주석인 경우 <!-- -->를 사용

 


 

▶ 자바스크립트 파일을 분리해서 사용하기

  • 자바스크립트를 html문서와 분리하여 사용하면 유지보수가 편리해진다.
  • 자바스크립트를 분리할 경우 에디터에서 파일을 저장할 때 확장자를. js로 만든다.
  • 따로 만든 자바스크립트 파일을 html 문서내에서 <script src = "자바스크립트 파일 경로">으로 선언하여 사용한다.
document.write('Hello World!');			//따로 분리할 자바스크립트 파일  .js확장자로 저장

 

 

위의. js파일은 Hello.js로 지정하였다.

 

 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="Hello.js">
    </script>
  </head>
  <body>
  </body>
</html>

 

위와 같이 script 태그 안에 src속성을 주어 추가한다.

 

 


 

▶  자바스크립트 코드 입력 시 주의 사항

1. 자바스크립트는 대소문자 구분하여 작성한다

New date();	// X
new Date();	// O

위의 코드는 날짜 객체를 생성하는 코드이다.

 

 

 

2. 코드는 할 줄을 작성한 후 세미콜론(;)을 붙여주는 게 좋다.

document.write("hi")document.write("bye") //X
document.write("hi"); document.write("bye"); //O

 

 

3. 코드를 작성할 때는 한 줄에 한 문장만 작성하는 것이 가독성에 좋다.

 

 

 

4. 문자형 데이터를 작성할 때는 큰따옴표(" ") 와 작은따옴표(' ')의 겹침 오류를 주의해야 한다.

document.write("나는 "초보 개발자"다!")	//x
document.write("나는 '초보 개발자'다!")	//o

 

 

5. 코드를 작성 할 때는 중괄호 또는 소괄호의 짝이 맞아야 한다.

document.write("welcome!";	//x
document.write("welcome!");	//o

 

 

 

 

"본 포스팅은 필자가 공부한 내용을 정리해 놓은 것으로 오류가 있을 수 있습니다."