자바 스크립트(js) 입문 공부 1. 자바 스크립트, 콘솔이란?

 

자바 스크립트(js)란?

자바 스크립트는 로직을 구현할 수 있는 프로그래밍 언어입니다. 

 

자바 스크립트는 서버 개발, 어플리케이션 개발 등 다양한 목적을 위해 사용할 수 있지만 주된 목적은 웹 개발(인터넷을 통해 서비스되는 웹 사이트를 개발하는 것) 입니다. 

 

css와 html으로 구성을 마치면 그 속에 이루어지는 동작을 자바 스크립트js가 조작합니다. 

 

작성하는 방법

자바 스크립트를 작성하는 방법은 두 가지 입니다. 

하나는 HTML 문서 내부에 작성을 하는 방법과 

또 하나는 자바 스크립트 파일을 만들고, 그 안에 작성한 코드를 HTML 문서에 연결하는 것입니다. 

 

자바 스크립트의 파일 확장자는 *.js 입니다. 

필요한 태그는 <script> </script> 입니다. 

 

css <style>는 일반적으로 head 의 하단에 삽입된다면, js <script> 코드는  body의 하단에 삽입됩니다.

외부에서 스크립트를 작성한다면 script.js  처럼 확장자를 입력해서 작성한 후 

<script src ="./script.js">   </script>   이렇게 src를 통해 연결해주시면 됩니다.

 

 

자바 스크립트의 객체

 

자바 스크립트 안에서의 객체란 어떤 사물이나 개념을 소프트웨어 적으로 사용하는 문법적 수단입니다. 자바 스크립트의 코드 내에서 객체는 값 혹은 기능을 가지고 있는 데이터로, 파이썬이나 자바에서의 객체와 동일한 의미의 객체 정의를 가지고 있습니다. 

 

자바 스클비트는 웹 브라우저라고 하는 객체에게 명령을 내리기 위해 사용하는 언어입니다. 

웹 브라우저라고 하는 객체 중 대표적인 것은 window 예요. 

즉, 웹 브라우저라는 객체에게 명령을 낼리 수 있도록 돕기 위해 자바 스크립트는 웹을 위한 표준 라이브러리를 제공합니다.

그것이 주어질 때 객체 형태로 주어져요. 

 

객체라는 의미가 추상적이어서 잘 와닿지 않는다면 '값 또는 기능을 가지고 있는 데이터' 라고 생각하시면 됩니다. 

객체에는 . 을 찍으면 객체의 데이터나 기능에 접근할 수 있습니다. 마치 자바처럼요.

 

자바 스크립트의 기초 작성법

 

주석

자바 스크립트 코드에서 주석을 사용할 때에는 자바, C와 동일하게 사용합니다. 

// 주석 // 　　 (주석을 한 줄만 작성)

/* 주석  */  　　(주석을 여러 줄에 걸쳐 작성) 

 

window

window는 웹 브라우저를 뜻합니다. 이를 이용해서 브라우저 기능에 접근할 수 있습니다.

간단한 예시를 작성해보겠습니다. 

 

window.alert("비밀번호를 5회 이상 틀렸습니다.")

 

window에 alert라는 메소드(객체가 가진 함수)입니다.

경고창을 띄워 줍니다.  괄호 안에는 경고하고자 하는 메세지를 입력해주시면 됩니다. 

 

경고창이 띄워져 있는 동안에는 자바 스크립트 코드가 끝나지 않은 상태 입니다.

이 상태가 오래 지속이 되면 부하가 되어 응답 없음과 같이 멈춤 현상에 빠질 수 있습니다. 

일종의 무한루프라고 생각하시면 됩니다.

 

 

콘솔 console

프로그래밍 언어를 배울 때 가장 첫번째로 배우는 것이 hello world를 출력하는 것처럼

자바 스크립트에서도 출력하는 것을 가장 기본으로 먼저 배웁니다.

그것을 위해서 우선 console 이라는 개념에 대해서 알아두어야 합니다. 

 

window.console

콘솔은 브라우저의 디버깅 콘솔을 의미합니다. 

콘솔이라고 하는 객체가 윈도우의 멤버로 포함이 되어 있어서, 브라우저의 객체를 통해 접근할 수 있습니다. 

 

웹 브라우저의 개발자 도구를 열면 메뉴 중 '콘솔' 이라는 항목이 존재하는데 이것을 누르면 나타나는 화면이 디버깅 콘솔입니다.  이것을 이용해서 자바 스크립트 코드를 테스트할 수 있습니다. 

 

파이썬의 대화형 셸을 연상시키는 화면은 실제로 자바 스크립트의 대화형 셸입니다.

콘솔 안에 작성을 해도 실행이 됩니다.

 

 

 

여기에서  window.console 이라는 객체는 콘솔을 포함한 다양한 하위 객체와 데이터, 메소드 등을 포함하고 있는데 

사용자의 편의를 위해 window. 을 생략한 채로 console 이렇게 작성할 수 있습니다.

 

console.log() 콘솔 로그 

log(n) 은 n을 콘솔 화면 상에 기록해둔다, 라는 뜻으로. 쉽게 말해 출력 기능을 뜻합니다.

window.alert("비밀번호를 5회 이상 틀렸습니다.")
console.log('이 내용을 화면에 기록해 두자.')
// 개발자가 화면에 기록할 내용을 표시할 때 이렇게 적기도 하며 
// print를 대신합니다.

 

자바 스크립트 코드 작성 규칙

 

대문자와 소문자를 잘 구문해서 작성합니다. 

 

자바 스크립트에서는 세미콜론이 선택 사항입니다. 

주요 코드에 세미콜론을 작성해서 '구문의 끝'을 알리는 역할로 주로 사용합니다. 

 

가능하면 한 줄에 두 개 이상의 구문을 쓰지 않습니다.

 

console.log("멋진 하루")
console.log("힘내기로 해.")

 

한 줄에 두 개의 구문을 작성한다면

console.log("멋진 하루") console.log("힘내기로 해.")

 

하나의 명령인지 두 개의 콘솔인지를 인식할 수 없어서 오류가 발생합니다. 

이럴 때에는 세미 콜론을 작성하면 오류가 사라집니다. 

console.log("멋진 하루"); console.log("힘내기로 해.")

하지만 가독성을 위해서는 두 줄로 적는 것이 좋겠죠. 

 

여기까지는 자바 스크립트의 가장 기초적인 내용을 다뤄보았습니다. 

이 다음에는 변수를 변수를 선언하는 것에 대해서 알아보며 본격적으로 코드를 다뤄볼게요.