Remmar: #1. 자바스크립트 소개

이 게시물은 자바스크립트 완벽가이드 6판의 예제를 중심으로 따라갑니다. 또한 자바스크립트 완벽가이드 6판을 참조하여 개인 공부용으로 작성한 압축판임을 알립니다. 예제 중심으로 보실 분은 Non Required를 건너뛰셔도 무방합니다.
#1. 자바스크립트 소개
#2. 자바스크립트 문법(Non Required)
#3. 자바스크립트 데이타 타입(Non Required)
#4. 자바스크립트 변수 (Non Required)

자바스크립트는 자바스크립트 언어의 핵심 부분인 코어 자바스크립트와 웹 브라우저에서 사용하기 위해 확장된 클라이언트 측 자바스크립트로 나뉜다(적어도 자바스크립트 완벽가이드 6판에서는 이렇게 소개한다.) 자바스크립트는 얼핏 보기에는 C, C++, Java등과 닮은 모양이지만, 변수의 타입을 하나하나 지정해주지 않아도 되는 인터프리터 방식의 프로그램언어입니다.

예제 1-1

자바스크립트가 가장 많이 쓰이는 분야는 웹 브라우저입니다. 코어 자바스크립트가 웹 브라우저에 내장되어 HTML의 스크립트를 실행합니다.

<html>
<head>
<title>Factorials</title>
</head>
<body>
<h2>Table of Factorials</h2>
<script>
var fact = 1;
for (i=1; i<10; i++) {
factfact = fact * i;
document.write(i + "! = " + fact + "<br>");
}
</script>
</body>
</html>

예제 1-2

예제 1-2는 자바스크립트가 HTML과 함께 쓰여서 동작 방식의 제어가 가능하다는 것을 보여주는 예제입니다. event handler(onclick)을 사용하여 alert를 진행합니다.

<html>
<head>
<title>Button</title>
</head>
<body>
<button onclick ="alert('You clicked the button');">Click here</button>
</body>
</html>

예제 1-3

예제 1-3은 책의 정오표를 찾아보고 틀린부분을 수정하려고 해보아도 책의 코드 바탕으로는 작동되지 않았습니다. 인사이트 홈페이지에서 관련 코드를 받아 첨부합니다.(첨부파일 참조)

<!DOCTYPE html>
<html>
<head>
<title>JAVASCRIPT Loan Calculator</title>
<style>
/* 사용자에게 보여지는 영역을 꾸미는 CSS영역이다. 복잡한 프로그램에서는 CSS와 Javascript코드를 다른 파일에 분리하는 것이 좋다. */
.result { font-weight: bold; } /*class = result*/
#payment { text-decoration: underline; } /*id = payment*/
</style>
</head>
<body>
<!--
사용자에게 보여지는 결과값을 HTML로 작성하였다.
-->
<form name = "loandata">
<table>
<tr><td><b>Enter loan Information:</b></td></tr>
<tr>
<td>1) Amount of the loan (any currency) :</td>
<td><input type = "text" name = "principal" onchange = "calculate();"></td>
</tr>
<tr>
<td>2) Annual percentage rate of interest :</td>
<td><input type = "text" name = "interest" onchange = "calculate();"></td>
</tr>
<tr>
<td>3) Repayment period in years: </td>
<td><input type = "text" name = "years" onchange = "calculate();"></td>
</tr>
<tr><td></td>
<td><input type = "button" value = "Compute" onclick = "calculate();"></td>
</tr>
<tr><td><b>Payment Information:</b></td></tr>
<tr>
<td>4) Your monthly payment: </td>
<td>$<span class = "result" id = "payment"></span></td>
</tr>
<tr>
<td>5) Your total payment: </td>
<td>$<span class = "result" id = "total"></span></td>
</tr>
<tr>
<td>6) Your total interest payments: </td>
<td>$<span class = "result" id = "totalinterest"></span></td>
</tr>
</table>
</form>
<script language = "javascript">
function calculate() {
var principal = document.loandata.principal.value;
var interest = document.loandata.interest.value / 100 / 12;
var payments = document.loandata.years.value * 12;
var x = Math.pow(1 + interest, payments);
var monthly = (principal * x * interest) / (x-1);
var payment = document.getElementById("payment");
var total = document.getElementById("total");
var totalinterest = document.getElementById("totalinterest");
if(isFinite(monthly) {
payment.innerHTML = monthly.toFixed(2);
total.innerHTML = (monthly * payments).toFixed(2);
totalinterest.innerHTML = ((monthly * payments) - principal).toFixed(2);
} else {
payment.innerHTML = "";
total.innerHTML = "";
totalinterest.innerHTML = "";
}
}
</script>
</body>
</html>

Remmar

2014/02/13

#1. 자바스크립트 소개

예제 1-1

예제 1-2

예제 1-3

댓글 없음:

댓글 쓰기