[js] 기본입출력, 스타일 가이드

식과 문

자바스크립트 언어는 식과 문으로 구별한다.

• 식? 표현식이다. 연산식뿐만 아니라 실제 값도, 함수를 실행하는 것도 식이 된다. 어떤값을 만들어낼수있다면 모두 식이며 식은 변수에 저장된다.
• 문? 명령이다. 문의 끝에는 세미콜론을 붙여서 구분한다. 조건문이나 제어문등을 예로들수있다. 넓은 의미에서 문은 값이나 식까지도 포함한다.

---

간단한 입출력방법

알림 창 출력하기 alert(메세지)

<script>
	alert("안녕하세요?");
</script>

확인 창 출력하기 confirm(메세지)

사용자가 누른 버튼의 결과를 변수에 저장한후 그값에 따라 프로그램에서 처리함

<script>
	var reply=confirm("정말 배경이미지를 바꾸겠습니까?");
</script>

프롬프트 창에서 입력받기 prompt(메세지) 또는 prompt(메세지, 기본값)

프롬프트는 텍스트 필드가 있는 작은 창이다. 프롬프트 창을만들땐 기본값을 지정하거나 지정하지 않을 수 있다.

<script>
	var name = prompt("이름을 입력하세요.","아무개");
</script>

기본값을 지정한경우이다.

웹 브라우저 화면에 출력을 담당하는 document.write()

• 자바 스크립트 실행결과는 텍스트나 이미지로 출력하거나, 따로 지정한 영역에 내용을 표시하는 경우가 많음.
• 하지만 단순히 브라우저 화면에서 결과값을 확인하는 용도로는 document.write() 많이 사용함.
• document.write(" ") : 웹 문서에서 괄호 안의 내용을 표시하는 명령문
• + 연산자(연결 연산자)를 사용해서 화면에 표시할 내용과 변수를 섞어서 나타낼수도있다.

<script>
	var name = prompt("이름을 입력하세요.");
    document.write("<b><big>"+name+"</big></b>님, 환영합니다.")
</script>

 

콘솔 창에 출력하는 console.log()문

괄호 안의 내용을 콘솔창에 표시합니다. 콘솔 창은 웹 브라우저의 개발자 도구 창에 포함되어 있는 공간으로, 콘솔 창에서 소스 코드의 오류를 발견하거나 변숫값을 확인할수도있다.

괄호 안에는 변수나 ,텍스트를 넣을 수 있지만 HTML 태그는 사용할수없다.

<script>
	var name = prompt("이름을 입력하세요.");
    console.log(name + "님 환영합니다.");
</script>

---

자바스크립트 스타일가이드

스타일 가이드는 코딩 규칙, 표준 스타일, 코딩 스타일이다.

스타일 가이드가 필요한 이유는 무엇일까? 혼자 개발한다면 상관이 없겠지만 우리는 오픈소스에 기여하거나 누군가와 코드를 공유할일이 빈번하게 일어난다. 스타일 가이드를 따라 작성하면 소스 코드의 오류도 줄이고 일관성이 생겨 읽기가 쉬어진다. 또한 웹 개발 프로젝트를 진행한다면 통일된 코딩 스타일이 꼭 필요한데, 그래야 여러 사람이 작성한 프로그램도 마치 한사람이 작성한것처럼 보이게된다. 또한 유지 보수도 수월하고 비용도 줄어든다.

자바 스크립트 스타일 가이드는 보통 구글이나 에어비엔비에서 배포한 것을 기준으로 작성한다.

 

자바 스크립트 소스를 작성할때 지켜야 할 규칙

1. 코드를 보기 좋게 들여쓰기 합니다.

자바스크립트 스타일 가이드에서 스페이스바를 눌러 공백이 2칸이나 4칸인 들여쓰기를 권장한다. 최근엔 2개를 많이사용

 

2. 세미콜론으로 문장을 구분한다.

자바스크립트에서 세미콜론은 문장의 끝을 나타내며 문장과 문장을 구분하는 역할도 한다.

소스는 한줄에 한문장만 작성하며 세미콜론을 붙여준다.

 

3. 공백을 넣어 읽기 쉽게 작성한다.

예약어나 연산자, 값 사이에는 공백을 넣어서 작성한다.

 

4. 소스 코드를 잘 설명하는 주석을 작성한다.

-한줄 주석(//)

-여러 줄 수석( /* */) css와 동일

 

5. 식별자는 정해진 규칙을 지켜 작성한다.

식별자? 변수 이름이다.

• 식별자의 첫글자는 반드시 영문자나 언더바 또는 $로 시작해야한다.
• 두 단어 이상이 모여 하나의 식별자를 만드는 경우 사이 공백을 둘 수없고, 하이픈이나 언더바로 연결해서 사용한다.
• 하이픈이나 언더바없이 두단어를 붙여 사용할 경우 첫번쨰 단어는 소문자로 두번째 단어는 대문자로 시작한다.

 

6. 예약어는 식별자로 사용할수없다.

자바스크립트에서 미리 정해놓은 키워드들은 예약어이므로 식별자로 쓸수없음