• 회원가입
  • 로그인
  • 구글아이디로 로그인

[Basic] JS - Statement (JS구문= JS명령문)

목차
  1. JS 명령문 정의
  2. JS 명령문 실행 순서
  3. JS 명령문 종결:  ; (세미콜론) 붙임
  4. JS는 공백 무시
  5. JS 한 줄의 길이 / 줄바꿈
  6. JS 명령어 동시 실행: { } (중괄호)로 묶기
  7. JS 키워드 (Keywords) 종류

 

JS 명령문 정의 

 

브라우저가 실행시켜야 할 지시사항 의미.

 


[예제]  

브라우저야,
HTML문서에서 hz 아이디 찾아, 

그곳에 홈짱닷컴 (Homzzang.com) 출력해 !!

 

 

<p id="homzzang"></p>

<script>
document.getElementById("homzzang").innerHTML = "홈짱닷컴 (Homzzang.com)";
</script>
 
 

JS 명령문 실행 순서

 

써진 순서대로, 위에서부터 하나씩 실행.

 


[예제]


<p id="homzzang"></p>

<script>
var x = 3;
var y = 4; 
var z = x + y; 
document.getElementById("homzzang").innerHTML = z; // 7
</script>
 
 

JS 명령문 종결:  ; (세미콜론) 붙임

 

1.

JS 한 명령문이 끝나면 끝에 ; (세미콜론) 붙이고 줄바꿈 해서 표기.
(위 예문 참조)

2.
; (세미콜론) 없이 엔터키 쳐서 한 명령어 끝남 표시 가능하나,
브라우저 에러 최소화 위해 되도록이면 ; (세미콜론) 추가 사용.

3.

줄바꿈 없이 세미콜론 옆으로 계속 명령어 나열 기재 가능하나,
가독성 위해 되도록이면 줄바꿈해 표기. (아래 예제 참고)



[예제]

<p id="homzzang"></p>

<script>
a = 3; b = 4; c = a + b;
document.getElementById("homzzang").innerHTML = c; // 7
</script>
 

PS.

 

1.

위처럼 var 키워드 없이 변수 선언하면, 그 변수는 전역변수 속성 갖음.

 

2. 

전역변수란 해당 html 문서 뿐 및 타 웹문서에서도 사용 가능한 변수.

 


JS는 공백 무시

 

JS 명령문은 공백 무시함. 

즉, 

공백이 아무리 많든, 또는 전혀 없든 똑같이 인식. 

다만, 가독성 위해 = 부호 앞뒤는 뛰어쓰기 권장.

 


[예제]

 

var site = "홈짱닷컴 (homzzang.com)";  // 권장
var site="홈짱닷컴 (homzzang.com)"; // 가능하나, 가독성 ↓

 

JS 한 줄의 길이 / 줄바꿈

 

JS 명령문 한 줄의 길이는 최대 80자 정도 권장.
줄바꿈 필요 시, 되도록 연산자 다음에서 줄바꿈.

 


[예제]
 
<p id="homzzang"></p>

<script>
document.getElementById("homzzang").innerHTML =  
"홈짱닷컴 (Homzzang.com)"; 
</script>


결과보기


JS 명령어 동시 실행: { } (중괄호)로 묶기

 
JS 명령문 여러 개가 함께 실행될 때, 그 여러 개를 { } (중괄호)로 묶음.
특히, JS 함수에서 자주 사용.
 

[예제]

<p id="hz">사이트명</p>
<div id="Hz">사이트 소개</div>

<p>
<button type="button" onclick="homzzang()">클릭</button>
</p>

<script>
function homzzang() {
    document.getElementById("hz").innerHTML = "홈짱닷컴 (Homzzang.com)";
    document.getElementById("Hz").innerHTML = "HTML, CSS, JavaScript, JQuery, PHP, SQL";
}
</script>

 

결과보기


PS.
아이디는 대소문자 구분함. (즉, homzzang과 Homzzang은 별개.)
 

JS 키워드 (Keywords) 종류

 

1.

JS 명령문은 JS 액션 실행 지시하는 키워드로 주로 시작.

(예) var : 변수 선언 키워드

 

2.

JS 키워드는 JS 내장 예약어라서, JS 변수로 사용 불가능. 

나중에 자세히 다룸.

 


 

break

switch나 loop 반복문을 빠져나올 때 사용.

 

continue

loop 반복문을 건너 뛰고, 위에서 시작.

 

debugger

JS 실행 중단시키고, 오류 찾아내는 함수 호출.

 

do ... while

먼저 JS 명령문 실행 후, 조건 부합하면 반복 실행.

 

for

조건 참이면 반복해서 실행. (횟수반복 / 대상반복)

 

function

함수 선언.

 

if ... else...

조건 부합 O 하면, if문 안의 JS 명령문 실행.
조건 부합 X 하면, else문 안의 JS 명령문 실행.

 

return

값을 반환. / 함수 빠져나옴.

 

switch

각 다른 상황별로의 조건문을 표현할 때 사용. 

긴 조건문일 경우 if문보다 더 간결하게 표현 가능.

 

try ... catch...finally...

JS 오류 찾아, JS 구문 블럭에 표시.

 

var

변수 선언

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
Basic JS - Home (JS입문) + Javascript Framework (프레임워크) 종류
Basic JS - Intro (JS소개)
Basic JS - Where To (JS위치) - JS구문 / JS코드위치 / JS사용법 ※ JS외부링크 주의사항
Basic JS - Output (JS출력= JS쓰기) ★★★★★
Basic JS - Syntax (JS구문) ★
Basic JS - Statement (JS구문= JS명령문)
Basic JS - Comment (JS주석)
Basic JS - Variable (JS변수) ★★★★★
Basic JS - Operator (연산자) - JS연산자 ★★★★★
Basic JS - Data Type - 데이터유형 ★★★★★ (= 데이터형식 = 데이터타입 = 데이터종류 = 자료형…
Basic JS - Function - JS함수 ★★★★★ ※ 일반함수 특징 2
Basic JS - Object - JS객체 ★★★★★
Basic JS - Scope - JS유효범위 (= JS접근범위 = 변수 종류) ★★★★★★★★★★
Basic JS - Event - JS이벤트 (= JS코드실행방법) ★★★★★
Basic JS - Strings - JS문자열
Basic JS - String Methods - JS문자열메서드
Basic JS - Number - JS숫자
Basic JS - Number Method - JS숫자메서드
Basic JS - Math 객체 - JS수학객체 (= JS산수객체 = Math객체 = Math Object = 매스 …
Basic JS - Dates - JS날짜
1/3
목록
찾아주셔서 감사합니다. Since 2012