자바스크립트 JavaScript
자바스크립트(JavaScript, JS)는 웹 브라우저에서 사용하기 위하여 만들어진 객체 기반의 스크립트 프로그래밍 언어이다.
자바스크립트는 HTML과 CSS로 만들어진 웹페이지를 동적으로 변경해주는 언어로 HTML, CSS와 함께 웹을 구성하는 요소 중 하나다. HTML이 웹 페이지의 기본 구조를 담당하고, CSS가 디자인을 담당한다면 자바스크립트는 클라이언트 단에서 웹 페이지가 동작하는 것을 담당한다.
자바스크립트를 사용해서 HTML의 내용, 속성, 스타일을 변경할 수 있다.
자바스크립트 특징
1. 객체 기반의 스크립트 프로그래밍 언어
2. 컴파일 과정을 거치지 않아 타입을 명시할 필요가 없는 인터프리터 언어 (클라이언트의 웹 브라우저에 의해 해석되고 실행)
3. 웹 문서(HTML)에 삽입해서 사용하는 스크립트 언어로 웹 브라우저에서 웹문서를 실행 할 때 코드가 해석된다.
4. 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현 가능하다.
자바스크립트 출력
HTML 페이지에 출력할 수 있는 방법이 여러가지가 있다.
1. document.write()
간단하게 웹 페이지에 출력하는 방식이다.
<script>
document.write("Hello World <br>");
document.write('Hello World', "<hr>")
document.write(1+2)
</script>문자열은 큰따옴표, 작은따옴표 모두 사용 가능하다. 1+2를 출력했을 때는 연산 결과인 3이 출력된다.
위의 코드에서 확인하듯이 자바스크립트는 명령문의 끝에 세미콜론(;)이 빠지더라도 문제가 되지 않는다. (세미콜론이 자동삽입 되지 않는 예외가 있기 때문에 붙이는 것이 좋다.)
<br>과 <hr> 을 추가 한 방식으로 보면, 다른 태그를 연결해서 출력하고 싶을 때는 이어서 작성하거나 쉼표(,)를 이용할 수 있다.
2. console.log()
웹 브라우저의 콘솔창에 출력할 수 있다.
<script>
console.log("Hello World");
</script>개발자도구의 console창에서 출력을 확인할 수 있다.
3. window.alert()
<button onclick="alertDialogBox()">대화상자</button>
<script>
function alertDialogBox() {
alert("대화상자 입니다.");
}
</script>대화상자에 내용을 출력할 수 있다.
대화상자라고 적힌 버튼을 클릭하면 대화상자 내용이 출력되도록 했다.
4. innerHTML
<p id="text">바뀌기 전 문장...</p>
<script>
var str = document.getElementById("text");
str.innerHTML = "Hello World";
</script>특정 id를 가진 태그의 내용이나 속성을 변경할 수 있다.
document 객체의 getElementByID()나 getElementsByTagName() 등의 메소드를 사용하여 HTML 요소를 선택하고 innerHTML 프로퍼티를 이용해서 내용이나 속성을 변경한다.
변수 / 상수
변수와 상수는 특정 값을 담을 수 있다. 변수, 상수 선언을 위해 let, var, const를 비교한다.
var
var n = 1;
document.write(n); //1 출력
var n = 2;
document.write(n); //2 출력
n = 3;
document.write(n); //3 출력var를 이용해 변수를 선언하였다. 같은 변수이름을 여러번 사용해도 문제가 되지 않는다. 간단한 코드를 짤 때는 편할 수 있지만, 혼돈을 야기할 수 있다는 단점이 있다.
var로 선언한 변수는 중복 선언 가능하고, 변수의 값 변경도 가능하다.
const
const c = 1;
c = 2; //에러중복 선언도, 값 변경도 안되는 것은 변수가 아닌 상수라고 할 수 있다. 상수는 한번 선언하고 값이 바뀌지 않는다.
상수는 const로 선언할 수 있고, 값 변경시 오류가 생긴다.
let
let n = 1;
console.log(n);
let n = 2; //Cannot redeclare block-scoped variable 'n'.
console.log(n);let으로 변수를 선언할 수도 있다.
var이 중복 변수선언이 가능한 것과 다르게, let으로 선언한 변수는 변수이름이 같게 중복선언 될 수 없다.
let n = 1;
console.log(n);
n = 2;
console.log(n);중복선언 오류를 해결하기 위해서는 재선언이 아닌 변수의 값을 새로 대입한다.
var n = 10;
if (true) {
var n = 20;
}
document.write(n); //20var는 지역변수로 사용해도 전역변수에 반영된다.
let m = 10;
if (true) {
let m = 20;
}
document.write(m); //10let을 사용하면 지역변수는 지역변수 범위에서만 사용된다. var과 구분할 수 있다.
var로 선언된 변수는 선언 이전에 참조할 수 있고 이러한 현상을 호이스팅이라고 한다.
호이스팅
변수를 선언 이전에 참조할 수 있는 현상
JavaScript에서 변수들은 실제 실행시에 코드의 최상단으로 끌어 올려지게 되어(hoisted) var로 선언된 변수는 선언시에 undefined로 값이 초기화 되는 과정이 동시에 일어난다.
console.log(name) //undefined
var name = '홍길동'선언하기 전에 name 변수를 사용했지만 undefined가 반환되었다.
let, const는 변수를 선언 이전에 참조하게 되면 에러를 발생시킨다.
호이스팅으로 예기치 못한 문제가 발생할 수 있으므로 var보다 let을 사용하도록 선호된다.
이러한 문제 때문에 var는 사용하지 않는 것을 선호한다.
let / const / var 비교
| let | const | var |
| 재할당 가능 | 재할당 불가능 | 재할당 가능 |
| 재선언 불가능 | 재선언 불가능 | 재선언 가능 |
| 블록 스코프 갖는 지역 변수 | 블록 스코프 | 함수 스코프 |
| 선언시 반드시 초기값 설정해야 하고, 이후 값 변경이 불가능 하다. | 호이스팅 된다. (사용X) | |
| 키워드 선언 없으면 자동으로 var로 선언된다. |
기본적으로 const를 사용하고 재할당해야 하는 경우에 let을 사용한다.
연산자
1. 대입 연산자
대입연산자 = 으로 값을 대입해준다.
let a = 1;
a = a + 3;
2. 산술 연산자(사칙 연산자)
var n1 = 10;
var n2 = 7;
document.write(n1+n2,"<br>");
document.write(n1-n2,"<br>");
document.write(n1*n2,"<br>");
document.write(n1/n2,"<br>");
document.write(n1%n2,"<br>");덧셈 뺄셈 곱셈 나눗셈(몫, 나머지) 모두 가능하다.
console.log('5'-1) //4
console.log('5'+1) //51문자열은 + 로 이어줄 수있기 때문에 +가 오면 5와 1 을 이어준다.
문자열에서 - 연산은 없기때문에 숫자로 바꾸어 숫자 5에서 1을 뺀 4가 나오게 된다.
3.복합 대입 연산자 (덧셈 뺄셈 나눗셈 곱셈)
let n = 20;
n += 4;
document.write(n,"<br>");
n -= 3;
document.write(n,"<br>");
n *= 2;
document.write(n,"<br>");
n /= 7;
document.write(n,"<br>");
n %= 9;
document.write(n,"<br>");대입연산자 = 와 산술연산자(+,-,*,/,%)을 합친 것이다. +=, -=, *=, /=, %= 으로 연산과 대입을 동시에 할 수 있다.
4. 증감 연산자
var n1 = 10;
var n2 = 10;
document.write(n1,"<br>"); //10
document.write(n1++,"<br>"); //10
document.write(n1,"<br>"); //11
document.write(n2,"<br>"); //10
document.write(++n2,"<br>"); //11
document.write(n2,"<br>"); //11++, -- 증감연산자도 가능하다. 변수와 증감연산자의 순서에 따라 연산 우선순위가 결정되므로 주의한다.
4. 관계 연산자 (비교 연산자)
var n1 = 10;
var n2 = 7;
document.write(n1 > n2,"<br>");
document.write(n1 < n2,"<br>");
document.write(n1 >= n2,"<br>");
document.write(n1 <= n2,"<br>");
document.write(n1 == n2,"<br>");
document.write(n1 != n2,"<br>");>, <, >=, <=, ==, != 으로 두 값을 비교 할 때 사용 할 수 있다.
추가적으로 ===, !== 도 있다.
var n1 = 10;
var n2 = "10";
document.write(n1 == n2,"<br>"); //true
document.write(n1 != n2,"<br>"); //false
document.write(n1 === n2,"<br>"); //false, 데이터와 데이터 타입까지 확인
document.write(n1 !== n2,"<br>"); //true숫자 10과 문자열로 입력한 "10"을 비교했다. ==과 !=로 비교할 때는 타입은 구분하지 않고 숫자값만 비교하기 때문에 둘을 같은 것으로 인식한다. 타입까지 구분해주기 위해서는 ===, !==을 사용한다. 둘의 데이터 타입까지 구분을 하게 된다.
5. 논리 연산자
! : NOT
&& : AND
|| : OR
var n1 = 10, n2 = 15;
var result = n1 >= 10 && n2 < 20;
document.write(result,"<br>");
result = n1 >= 10 || n2 < 20;
document.write(result,"<br>");
document.write(!result,"<br>");
반복문
1. while
var n1 = 1;
while(n1 <= 10){
document.write(n1,"<br>");
n1++;
}while문은 ()의 조건이 참일 동안 {} 명령을 수행하는 반복문이다. 숫자 1에서 10까지 출력하였다.
<style>
.red{
color:red;
}
.blue{
color:blue;
}
</style>
<script>
//숫자 1~10까지 출력하는 반복문
//숫자가 짝수면 글자색을 파랑색, 홀수면 글자색을 빨간색으로 숫자 출력
var i = 1;
while(i <= 10){
var tag = i % 2 == 0 ? "<p class='blue'>" + i + "</p>" : "<p class='red'>" + i + "</p>";
document.write(tag);
i++;
}
//백틱을 이용한 태그 조립
i = 1;
while(i <= 10){
var tag = i % 2 == 0 ? `<p class="blue">${i}</p>`: `<p class="red">${i}</p>`;
document.write(tag);
i++;
}
</script>문자열과 변수를 합칠 때 기존에 ""와 +를 이용했다. 따옴표 대신, 백틱(`)을 사용하고 ${ } 사이에 변수나 연산 등을 삽입하면 편리하게 코드를 만들 수 있다. 위의 while문 2개를 통해 비교할 수 있다.
삼항연산자를 이용해 조건이 참일 때의 결과, 거짓일 때의 결과를 한번에 작성하였다.
2. do-while
i = 1;
sum = 0;
do{
sum += i;
i++;
}while(i<1);
document.write(sum); // 1 출력do-while은 while()의 조건이 맞지 않더라도 한번은 실행하게 된다. 이후는 조건이 맞을 동안에만 반복한다.
변수 조건이 처음부터 while조건에 부합하지 않지만, do 를 통해서 한번은 실행하여 값이 sum에 저장되도록 하였다.
3. for
var dan = Number(prompt('숫자 입력','0'));
for(i=1;i<10;i++){
document.write(`<p>${dan} * ${i} = ${dan*i}</p>`);
}prompt를 통해 대화상자로 문자열을 입력받았다. 입력받은 문자열인 숫자를 Number으로 숫자로 바꿔준 뒤에 변수에 대입하였다.
for() 조건이 참일 동안 반복문을 수행한다.
입력받은 숫자의 구구단을 1부터 9까지 수행했다.
<style>
.container{
display: flex;
flex-direction: row;
}
.dan{
width: 150px;
padding:10px;
text-align: center;
}
h2{
text-align: center;
}
</style>
<script>
//구구단 2단~9단까지 출력
var tag = `<div class="container">`;
for(dan=2;dan<10;dan++){
tag += `<div class="dan"><h2>${dan}단</h2>`;
for(i=1;i<10;i++){
tag += `<p>${dan} * ${i} = ${dan*i}</p>`;
}
tag += `</div>`;
}
tag += `</div>`;
document.write(tag);
</script>
반복문을 중첩해서 2단부터 9단까지의 구구단을 출력했다. 태그 선택자를 추가해서 flex 속성을 주었다.
<script>
var n = 1;
var tag = `<table>`;
for(i=0;i<5;i++){
tag += `<tr>`;
for(j=0;j<5;j++){
tag += `<td>${n}</td>`;
n++;
}
tag += `</tr>`;
}
tag += `</table>`;
document.write(tag);
</script>반복문 중첩으로 table 태그도 간단하게 만들 수 있다.
'WEB > JavaScript' 카테고리의 다른 글
| 자바스크립트 : document.getElementById(id); (1) | 2022.06.14 |
|---|---|
| 자바스크립트 : Math 메서드 (1) | 2022.06.14 |
| 자바스크립트 : 문자열 - charAt(), indexOf(), lastIndexOf(), length, replace(), replaceAll(), charCodeAt(), fromCharCode() (1) | 2022.06.14 |
| 자바스크립트 : alert(경고창), confirm(선택창), prompt(입력창) (1) | 2022.06.14 |
| 자바스크립트 : 조건문(if, if-else, else / switch / break, continue), isNaN() (1) | 2022.06.13 |