본문 바로가기
JS

Javascript | 자바스크립트, 이건 뭐지?

by Learn, Code, Repeat 2021. 6. 21.
반응형

어서 와, 자바스크립트는 처음이지?

 

안녕하세요

 

Javascript(자바스크립트)의 세계로 오신 걸 환영합니다

자바스크립트는 웹 개발의 꽃 이라고 할 수 있는 부분인데요

 

웹 브라우저에서만 작동되는 언어로

웹 페이지에서 유저의 행동에 반응할때 사용됩니다

 

예를 하나 들어볼게요

다크모드 아시죠? 웹사이트의 전체적 색이 어두워지는 거

이 다크모드 버튼을 클릭했을 때 웹사이트의 스타일(CSS)을 바꾸는걸 자바스크립트가 해주는 겁니다

 

이 외에도 정말 많은 일들을 할수있는데요

어떤 것들을 할 수 있는지 알아보기 전에

자바스크립트를 어떻게 사용하고 어떻게 작성하는지를 먼저 알아볼게요

 

 

오늘은 처음이니까 제일 기본들만 알아볼게요

 

 

자바스크립트 사용하기

자바스크립트는 두 가지 방법으로 사용할 수 있습니다

첫 번째는 HTML의 <script> 태그 안에서 사용하는 거

두 번째는. js 파일을 <script> 태그로 첨부하는 방법

 

먼저 <script>태그 안에서 사용하는 방법은

HTML 문서에서 <body>의 닫힘 태그 전, 즉 </body> 전에 <script></script>를 넣어주고

이 사이에 자바스크립트 코드를 작성하면 됩니다

....
<script>
  // 자바스크립트 코드
</script>
</body>
</html>

 

다음으로. js 파일을 사용하는 경우에서

위에서처럼 <script>를 바디의 끝에 적어주고

src 속성을 사용해서. js파일과 연결시켜줍니다

....
<script src="scripts.js"></script>
</body>
</html>

 

 

 

자바스크립트 작성하기

자바스크립트는 변수를 사용해서 코드를 짜는데요

이 변수는 여러 데이터 타입을 넣을 수 있는 박스라고 생각시면 되겠습니다

 변수를 만들려면 변수 이름 앞에 'var'을 사용합니다

var name = "Learn Code Repeat"
var age = 1
var total = 10.22

 

 

자바스크립트 보는 방법

자바스크립트는 HTML처럼 브라우저에서 볼 수 있는데

보는 방법은 HTML과는 다릅니다

먼저 브라우저에서 F12를 누르면 개발자 도구가 나타납니다

여기서 Console탭을 열면 여기서 자바스크립트를 볼 수 있습니다

 

이 Console탭에서 자바스크립트를 보려면 자바스크립트 코드를 사용해야 하는데요

console.log()를 사용해서 할 수 있습니다

 

 

 

 

오늘은 자바스크립트의 제일 기본들을 알아봤습니다

 

 

수고하셨습니다

 

끝!

'JS' 카테고리의 다른 글

Javascript | 데이터 타입 모음  (0) 2021.08.09

댓글