JavaScript权威指南笔记(一)

最新推荐文章于 2025-12-04 17:20:28 发布

原创最新推荐文章于 2025-12-04 17:20:28 发布 · 830 阅读

·

0

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章标签：

#javascript #function #html #浏览器 #payment #服务器

DHTML 专栏收录该内容

12 篇文章

订阅专栏

这篇博客主要介绍了JavaScript的基础知识，包括其解释性、面向对象和无类型的特性，并探讨了JavaScript在浏览器中的应用，如控制文档外观、浏览器行为、HTML表单交互、用户事件响应及Cookie操作。此外，还提供了一个JavaScript计算借贷支出的实例，帮助读者理解JavaScript的语法和规范。

第一章 JavaScript概述

三个特性：解释性,具有面向对象能力,无类型语言

兼容性：IE6支持JScript5.5,它基本上等同JavaScript1.5。但IE6只支持部分W3C DOM标准，缺乏对W3C DOM标准的事件模型的支持

特性：1.控制文档的外观和内容，如：Document.write("HTML代码")方法可以在浏览器中写入HTML文本。
             2.对浏览器的控制。如：window对象允许对浏览器的行为进行控制。
             3.与HTML表单的交互。可以对From对象以及它包含的控件进行读写,通常用来进行表单的数据进行验证,这种方式没有通过服务器，而是在客户端进行，减轻了服务器负担。
             4.与用户的交互。如定义用户触发事件,我们用的最多的onClick()事件。
             5.使用Cookie。能直接读取客户端上的Cookie值，还可以根据cookie的值动态的生成文档内容。

用javaScript计算借贷支出的一个范例，熟悉下JavaScript的一些格式和规范：

<head><title>JavaScript Loan Calculator</title></head>

<body bgcolor="white">

<!--

This is an HTML form that allows the user to enter data, and allows

JavaScript to display the results it computes back to the user. The

form elements are embedded in a table to improve their appearance.

The form itself is given the name "loandata", and the fields within

the form are given names like "interest" and "years". These

fieldnames are used in the JavaScript code that follows the form.

Note that some of the form elements define "onchange" or "onclick"

event handlers. These specify strings of JavaScript code to be

executed when the user enters data or clicks on a button.

-->

<form name="loandata">

<table>

<tr><td colspan="3"><b>Enter Loan Information:</b></td></tr>

<tr>

<td>1)</td>

<td>Amount of the loan (any currency):</td>

<td><input type="text" name="principal" size="12"

onchange="calculate();"></td>

</tr>

<tr>

<td>2)</td>

<td>Annual percentage rate of interest:</td>

<td><input type="text" name="interest" size="12"

onchange="calculate();"></td>

</tr>

<tr>

<td>3)</td>

<td>Repayment period in years:</td>

<td><input type="text" name="years" size="12"

onchange="calculate();"></td>

</tr>

<tr><td colspan="3">

<input type="button" value="Compute" onclick="calculate();">

</td></tr>

<tr><td colspan="3">

<b>Payment Information:</b>

</td></tr>

<tr>

<td>4)</td>

<td>Your monthly payment will be:</td>

<td><input type="text" name="payment" size="12"></td>

</tr>

<tr>

<td>5)</td>

<td>Your total payment will be:</td>

<td><input type="text" name="total" size="12"></td>

</tr>

<tr>

<td>6)</td>

<td>Your total interest payments will be:</td>

<td><input type="text" name="totalinterest" size="12"></td>

</tr>

</table>

</form>

<!--

This is the JavaScript program that makes the example work. Note that

this script defines the calculate() function called by the event

handlers in the form. The function refers to values in the form

fields using the names defined in the HTML code above.

-->

<script language="JavaScript">

function calculate() {

// Get the user's input from the form. Assume it is all valid.

// Convert interest from a percentage to a decimal, and convert from

// an annual rate to a monthly rate. Convert payment period in years

// to the number of monthly payments.

var principal = document.loandata.principal.value;

var interest = document.loandata.interest.value / 100 / 12;

var payments = document.loandata.years.value * 12;

// Now compute the monthly payment figure, using esoteric math.

var x = Math.pow(1 + interest, payments);

var monthly = (principal*x*interest)/(x-1);

// Check that the result is a finite number. If so, display the results

if (!isNaN(monthly) &&

(monthly != Number.POSITIVE_INFINITY) &&

(monthly != Number.NEGATIVE_INFINITY)) {

document.loandata.payment.value = round(monthly);

document.loandata.total.value = round(monthly * payments);

document.loandata.totalinterest.value =

round((monthly * payments) - principal);

}

// Otherwise, the user's input was probably invalid, so don't

// display anything.

else {

document.loandata.payment.value = "";

document.loandata.total.value = "";

document.loandata.totalinterest.value = "";

}

}

// This simple method rounds a number to two decimal places.

function round(x) {

return Math.round(x*100)/100;

}

</script>

</body>

</html>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。