<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script>
alert('Hello world');
</script>
</body>
</html>자바스크립트는 웹브라우저에서 HTML,CSS를 동적으로 제어하기 위해서 만들어진 언어이다. 위와 같이 안에 있는 건 자바스크립트이다.
크롬을 사용한다면 다음과 같은 방법으로 자바스크립트를 간단하게 실행해 볼 수 있다.
-
Ctrl+Shift+J (윈도우), 커멘트+Alt+J (OSX) 키를 누른다. 콘솔 탭이 선택된 상태로 개발자 도구가 실행된다.
-
alert('hello world')를 실행한다. 실행 결과 아래와 같이 경고창이 실행된다.
숫자와 문자
Math.pow(3,2); // 9, 3의 2승
Math.round(10.6); // 11, 10.6을 반올림
Math.ceil(10.2); // 11, 10.2를 올림
Math.floor(10.6); // 10, 10.6을 내림
Math.sqrt(9); // 3, 3의 제곱근
Math.random(); // 0부터 1.0 사이의 랜덤한 숫자
문자는 "(큰 따옴표) 혹은 '(작은 따옴표) 중의 하나로 감싸야 한다. 큰 따옴표로 시작하면 큰 따옴표로 끝나야하고, 작은 따옴표로 시작하면 작은 따옴표로 끝나야 한다. String이라고 한다.
alert("coding everybody");
alert('coding everybody');
여러줄의 표시
여러줄을 표시하기 위해서는 아래와 같이 한다. \n는 줄바꿈을 의미하는 특수한 문자다.
alert("안녕하세요.\n TIL에 오신건 환영합니다 오신 것을 환영합니다");
변수의 선언
JavaScript에서 변수는 var로 시작한다. var은 변수를 선언하겠다는 것을 의미한다
var a = 1;
alert(a+1); //2
var a = 2;
alert(a+1); //3주석
Brackets editor 사용시 주석을 코멘드 키는 Shift + / 버튼이다
비교 연산자
alert(1=='1'); //true
alert(1==='1'); //false== 보다 ===을 쓰는것을 강력히 권장한다. (===같은 경우는 데이터 타입이 정확히 같은 경우에만 True로 처리를 함)
!(=)
'!'는 부정을 의미한다. '같다'의 부정은 '같지 않다'이다. 이것을 기호로는 '!='로 표시한다. 아래의 결과는 !=의 결과인데 ==와 정반대의 결과를 보여준다.
(>)
좌항이 우항보다 크다면 참, 그렇지 않다면 거짓임을 알려주는 연산자다.
(>=)
좌항이 우항보다 크거나 같다
조건문
if
조건문은 if로 시작한다. if 뒤의 괄호에 조건이 오고, 조건이 될 수 있는 값는 Boolean이다. Boolean의 값이 true라면 조건이 담겨진 괄호 다음의 중괄호 구문이 실행된다.
if(true){
alert(1);
alert(2);
alert(3);
alert(4);
}
alert(5);조건이 true임으로 결과값은 12345를 모두 출력하게 된다. 만약 조건이 false일 경우 결과값은 5만 출력할 것이다.
else
if(true){
alert(1);
} else {
alert(2);
}
위의 예제의 결과값은 1을 출력하게 될 것 이다, 만약 true가 --> false로 바뀔경우 else의 결과 2를 출력하게 될것이다.
else if
if(false){
alert(1);
} else if(true){
alert(2);
} else if(true){
alert(3);
} else {
alert(4);
}위의 예제의 출력값은 2이다. else if 를 사용하여 좀 더 풍부한 조건문을 사용 할수 있다.
&&
&&는 좌항과 우항이 모두 참(true)일 때 참이된다. 다음 예제를 보자. 결과는 1이다. &&의 좌우항이 모두 true인 것은 첫번째 조건문 밖에 없기 때문이다. 이러한 논리 연산자를 and 연산자라고 한다.
if(true && true){
alert(1);
}
if(true && false){
alert(2);
}
if(false && true){
alert(3);
}
if(false && false){
alert(4);
}||
'||'는 '||'의 좌우항 중에 하나라도 true라면 true가 되는 논리 연산자다. |기호는 통상 엔터키 위에 있는 원화표시 키를 쉬프트와 함께 누르면 입력된다. or 연산자라고 부른다. 다음 예를 보자. 결과는 1,2,3이 출력된다. 마지막 조건문의 '||'는 좌항과 우항이 모두 false이기 때문에 false가 된다.
if(true || true){
alert(1);
}
if(true || false){
alert(2);
}
if(false || true){
alert(3);
}
if(false || false){
alert(4);
}반복문
while
while (조건){
반복해서 실행할 코드
}조건이 ture일 경우에만 반복적으로 {}안에 있는 코드를 실행하게 된다.
for
for(초기화; 반복조건; 반복이 될 때마다 실행되는 코드){
반복해서 실행될 코드
}
for(var i = 0; i < 10; i++){
document.write('coding everybody'+i+'<br />');
}위의 예제는 i=10이 되는순간 반복문을 멈추게 된다.
반복문 제어
break
반복작업을 중간에 중단시키고 싶다면 어떻게 해야할까? break를 사용하면 된다.
for(var i = 0; i < 10; i++){
if(i === 5) {
break;
}
document.write('coding everybody'+i+'<br />');
}위 예제의 출력값은 아래와 같을 것이다.
coding everybody 0
coding everybody 1
coding everybody 2
coding everybody 3
coding everybody 4
Continue
그럼 실행을 즉시 중단 하면서 반복은 지속돼게 하려면 어떻게 해야 할까?
for(var i = 0; i < 10; i++){
if(i === 5) {
continue;
}
document.write('coding everybody'+i+'<br />');
}
위와같은 코딩을 사용할경우에 if의 조건을 무시하고 for 반복문을 출력할 것이다.
