자바스크립트(Javascript, JS)는 HTML, CSS과 함께 웹 표준을 구성하는 요소로서, 웹 문서의 동적인 부분을 담당한다. 즉, 웹 문서에서 변화가 일어나도록 하기 위해서는 프로그래밍 언어인 자바스크립트를 사용해야 한다.
자바스크립트는 CSS가 style 태그를 사용하여 그 안에 입력했듯이 script 태그를 사용하여 그 안에 입력하면 된다.
<html>
<head>
<title>...</title>
<script>
<!-- 자바스크립트 작성 위치 -->
</script>
</head>
<body>
...
</body>
</html>자바스크립트도 외부 스크립트를 가져올 수 있다. 이 경우에는 script 태그에 src 속성에 js 파일의 경로를 입력하면 된다.
.
.
.
<script src="script.js"></script><!-- js 파일명이 script.js인 경우 -->
.
.
.자바스크립트는 기본적으로 C언어 문법을 따르고 객체 기반 언어이기 때문에 자바와 문법이 상당히 유사하다. 자바스크립트를 공부하다 보면 자바와 닮은 부분을 자주 발견할 수 있을 것이다. 그럼 자바스크립트의 기초적인 문법을 살펴보자.
먼저, 주석의 경우 한 줄 주석은 '//'을, 블록 주석은 '/*'와 '*/'을 사용한다.
//한 줄 주석
/*
블록 주석
*/그다음, 변수 선언은 자바와 다르게 자료형(data type)을 지정하지 않아도 된다. 대신, 변수임을 알 수 있도록 'var' 키워드를 변수명 앞에 사용한다.
var a = 12;
var b = 32.1;
var c = 'a';//"a"로 사용해도 자바스크립트에서는 문자와 문자열을 구분하지 않기 때문에 괜찮다.
var d = "abcd";
var e = true;여기서 var를 사용하지 않은 채로 변수명을 사용하면, 변수명이 이미 사용 중일 경우 그 변수의 값을 수정하게 되며, 새로운 변수명일 경우 전역 변수로 선언되어 스크립트 어디서든 호출이 가능하다.
자바스크립트에서 키보드 입력을 받을 때는 prompt 함수를 사용한다.
var a = prompt("내용을 입력하세요");위 코드를 실행하면 "내용을 입력하세요"라는 문구가 뜬 후 키보드 입력을 받는다. 입력 후 엔터 키를 치면 입력한 내용이 변수에 저장된다.
출력 방법은 document 클래스의 write 함수를 사용하면 된다.
document.write("Hello World!");document.write 함수는 자바의 System.out.print()에 해당한다고 보면 된다.(C언어나 파이썬의 print() 함수)
혹은 경고 창(또는 경고 다이얼로그, 메시지 박스)을 통해서 출력하려면 다음과 같이 쓰면 된다.
alert("Hello World!");if - else if - else문, switch문, for문, while문, do-while문 모두 자바의 문법과 동일하기 때문에 예제로 대신하겠다.
//if - else if - else문
var score = prompt("점수를 입력하세요", "");
if (score>= 90) {
document.write("점수: "+score+" 등급: 우수<br>")
} else if(score>=80) {
document.write("점수: "+score+" 등급: 보통<br>")
} else {
document.write("점수: "+score+" 등급: 미달<br>")
}//switch문
var grade = prompt("학점을 입력하세요", "")
switch(grade) {
case "A" :
document.write("등급: A<br>");
break;
case "B" :
document.write("등급: B<br>");
break;
case "C" :
document.write("등급: C<br>");
break;
default :
document.write("등급이 잘못되었습니다.<br>");
break;
}//for문
var sum = 0;
for (var i=0;i<=10;i++) {
sum += i;
}
document.write(sum+"<br>");
//while문
var sum = 0;
var i = 0;
while(i<11){
sum += i;
i++;
}
document.write(sum+"<br>");//do-while문
sum = 0;
var i = 0;
do {
sum += i;
i++
} while(i<11)
document.write(sum+"<br>");함수 선언 방법은 함수 이름 앞에 function 키워드만 붙여주면 된다. 자바스크립트는 위에서 말했듯이 변수에 형 제한이 없기 때문에 함수의 반환 값 역시 입력해줄 필요가 없으므로 데이터 형 없이 "function 함수명(매개변수명1,..., 매개변수명n)"의 형식으로 입력해주면 된다.
/*
자바라면,
public double add(double arg1, double arg2) {
double sum = arg1 + arg2;
return sum;
}
과 같이 썼겠지만 자바스크립트에서는,
*/
function add(arg1, arg2){
var sum = arg1 + arg2;
return sum;
}
자바스크립트는 객체지향이 아닌 객체 기반 언어이다. 객체 지향 언어처럼 상속이나 다형성 등을 지원하지는 않지만 속성과 메서드로 구성된 객체 개념을 사용하고 호출이나 선언 시 객체 지향 언어와 같은 방식을 사용한다.
자바스크립트의 객체에는 Array, Date, String, Math 등 미리 정의된 코어 객체, HTML 태그들을 객체화한 DOM(Document Object Model) 객체, 브라우저를 제어하기 위한 BOM(Browser Object Model) 객체가 존재한다.
객체 생성(인스턴스화)은 다음과 같이 이루어진다.
var today = new Date();
var msg = new String("Hi");사용자 정의 객체는 다음과 같이 사용한다.
var obj = new Object();
/*
자바스크립트에서는 속성과 메서드를 포함하여 별도의 클래스를 생성해놓고 인스턴스화하는 것이
아니라 객체를 먼저 선언과 생성 후에 거기에 프로퍼티와 메서드를 집어넣는다.
*/
obj.property1 = 값1;//생성된 obj 객체에 속성을 정의
obj.property2 = 값2;
function function1(arg1, ...,argn){
return something;
}
obj.function1 = function1;//먼저 정의해 놓은 함수를 정의 객체에 삽입.다음은 사용자 정의 객체를 이용한 account 객체 예제이다.
<DOCTYPE html>
<!--js_user_object.html-->
<html>
<head>
<title>리터럴표기법으로 객체 만들기</title>
<script>
var account = {
owner : "황기태",
code : "111",
balance : 35000,
inquiry : function () { return this.balance; },
deposit : function(money) { this.balance += money; },
withdraw : function (money) {
this.balance -= money;
return money;
}
};
</script>
</head>
<body>
<h3>리터럴 표기법으로 객체 만들기</h3>
<hr>
<script>
document.write("account : ");
document.write(account.owner + ", ");
document.write(account.code + ", ");
document.write(account.balance + "<br> ");
account.deposit(10000);
document.write("10000원 저금 후 잔액은 "
+ account.inquiry() + "<br>");
account.withdraw(5000);
document.write("5000원 인출 후 잔액은 "
+ account.inquiry() + "<br>");
</script>
</body>
</html>'🕸웹 > JavaScript' 카테고리의 다른 글
| [20210908] 백엔드 개발자를 위한 자바스크립트 개념 잡기 (0) | 2021.09.08 |
|---|