JavaScript_第一天

JavaScript是一种具有面向对象能力的、解释型的程序设计语言。

Example_01:Factorials

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



document.write():当HTML文档载入到浏览器的时候,用来动态地把HTML文本输出到一个HTML文档。

Example_02:一个定义了JavaScript事件句柄的HTML按钮

<button onclick = "alert('You clicked the button');">
Click here
</button>


点击执行效果:


使用的onclick属性包含了一串JavaScript代码,当用户点击该按钮的时候,就会执行这段代码。在这个例子中,onclick事件句柄调用alert()函数,该函数会弹出一个对话框以显示指定的消息。

Example_03:用JavaScript计算借贷支付(在IE浏览器上不能运行)

<html>
	<head>
		<title>JavaScript Loan Calculator</title>
		<style>
		/* This is a CSS style sheet:it adds style to the program output */
		.result {/* For elements with class="result" */
			font-weight:bold;
		}
		#payment {/* For element with id="payment" */
			text-decoration:underline;
		}
		</style>
	</head>
	<body>
	<!--
		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 field within
		the form are given names such as "interest" and "years".These
		field names 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><b>Enter Loan Information:</b></td></tr>
				<tr>
					<td>1)Amount of the loan (any currency):</td>
					<td><input type="text" name="principal" οnchange="calculate();"></td>
				</tr>
				<tr>
					<td>2)Annual percentage rate of interest:</td>
					<td><input type="text" name="interest" οnchange="calculate();"></td>
				</tr>
				<tr>
					<td>3)Repayment period in years:</td>
					<td><input type="text" name="years" οnchange="calculate();"></td>
				</tr>
				<tr>
					<td></td>
					<td><input type="button" value="Compute" οnclick="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">
		/*
		 * This is the JavaScript function that makes the example work.Note that
		 * this script defines the calculate() function called by the event
		 * handlers in the form.The function reads values from the form
		 * <input> fields using the names defined in the previous HTML code.It outputs
		 * its results into the named <span> elements.
		 */
		function calculate() {
			// Get he 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);

			// Get named <span> elements from the form.
			var payment = document.getElementById("payment");
			var total = document.getElementById("total");
			var totalinterest = document = document.getElementById("totalinterest");

			// Check that the result is a finite number.If so,display the
			// result bu setting the HTML content of each <span> element.
			if (isFinite(monthly)) { 
				payment.innerHTML = monthly.toFixed(2);
				total.innerHTML = (monthly * payments).toFixed(2);
				totalinterest.innerHTML = ((monthly * payments) - principal).toFixed(2);
			}
			// Otherwise,the user's inpt was probably invalid, so display nothing.
			else {
				payment.innerHTML = "";
				total.innerHTML = "";
				totalinterest.innerHTML = "";
			}
		}
		</script>
	</body>
</html>

在浏览器URL输入的格式为:javascript:URL伪协议来计算JavaScript表达式并返回计算的结果。一个JavaScript URL是由javascript:协议说明符加上任意的JavaScript代码(语句之间用分号隔开)构成的。当浏览器装载了这样的URL时,它将执行其中的JavaScript代码。这样的URL中的最后一个表达式的值将被转换成字符串,该字符串会被作为新文档显示在Web浏览器中。

Example_04:在浏览器URL输入:

Javascript:i=1;alert(i);

将会弹出一个对话框显示i的值为1。


JavaScript程序是用Unicode字符集编写的。

JavaScript是一种区分大小写的语言。但是要注意,HTML并不区分大小写(尽管XHTML是区分大小写的)。

JavaScript会忽略程序中记号之间的空格、制表符和换行符。

JavaScript每条语句必须写分号,这样比较规范,不容易出错。比如:

return

true;

等价于

return;

true;

和Java一样,JavaScript也支持C++型的注释和C型注释。JavaScript会把处于”//”和一行结尾之间的任何文本都当作注释忽略掉。此外”/*”和”*/”之间的文本也会被当作注释,这些C型的注释可以跨越多行,但是其中不能有嵌套的注释。下面代码都是合法的JavaScript注释:

//This is a single-line comment.
/*This is also a comment */ // and here is another comment.
/*
*This is yet another comment.
*It has multiple lines.
*/

命名规则:第一个字符必须是字母、下划线(_)或美元符号($),接下来的字符可以是字母、数字、下划线或美元符号(数字不允许作为首字符出现,这样JavaScript可以轻易的区别开标识符和数字了)。

这次就讲到这里了,最后附加一个小例子:

<script>
	document.write("<h2>Table of Fibonacci Numbers</h2>");
	for (i = 0, j = 1, k = 0, fib = 0; i < 50; ++i, fib = j + k, j = k, k = fib) {
		document.write("Fibonacci (" + i + ") = " + fib);
		/*
			Equals:alert("Fibonacci (" + i + ") = " + fib");
			This will pop a windows.
		*/
		document.write("<br />");
	}
</script>


休息一下

不要为了取悦别人而改变。改变,只为让自己变得更好,拥有更美好的未来。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【项目资源】:包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、MATLAB、python、web、C#、EDA、proteus、RTOS等项目的源码。 【项目质量】:所有源码都经过严格测试,可以直接运行。功能在确认正常工作后才上传。 【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】:项目具有较高的学习借鉴价值,也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说,可以在这些基础代码上进行修改和扩展,实现其他功能。 【沟通交流】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。鼓励下载和使用,并欢迎大家互相学习,共同进步。【项目资源】:包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、MATLAB、python、web、C#、EDA、proteus、RTOS等项目的源码。 【项目质量】:所有源码都经过严格测试,可以直接运行。功能在确认正常工作后才上传。 【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】:项目具有较高的学习借鉴价值,也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说,可以在这些基础代码上进行修改和扩展,实现其他功能。 【沟通交流】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。鼓励下载和使用,并欢迎大家互相学习,共同进步。【项目资源】:包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、MATLAB、python、web、C#、EDA、proteus、RTOS等项目的源码。 【项目质量】:所有源码都经过严格测试,可以直接运行。功能在确认正常工作后才上传。 【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】:项目具有较高的学习借鉴价值,也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说,可以在这些基础代码上进行修改和扩展,实现其他功能。 【沟通交流】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。鼓励下载和使用,并欢迎大家互相学习,共同进步。【项目资源】:包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、MATLAB、python、web、C#、EDA、proteus、RTOS等项目的源码。 【项目质量】:所有源码都经过严格测试,可以直接运行。功能在确认正常工作后才上传。 【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】:项目具有较高的学习借鉴价值,也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说,可以在这些基础代码上进行修改和扩展,实现其他功能。 【沟通交流】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。鼓励下载和使用,并欢迎大家互相学习,共同进步。【项目资源】:包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、MATLAB、python、web、C#、EDA、proteus、RTOS等项目的源码。 【项目质量】:所有源码都经过严格测试,可以直接运行。功能在确认正常工作后才上传。 【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】:项目具有较高的学习借鉴价值,也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说,可以在这些基础代码上进行修改和扩展,实现其他功能。 【沟通交流】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。鼓励下载和使用,并欢迎大家互相学习,共同进步。【项目资源
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值