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 allowsJavaScript to display the results it computes back to the user.Theform elements are embedded in a table to improve their appearance.The form itself is given the name "loandata",and the field withinthe form are given names such as "interest" and "years".Thesefield 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 beexecuted 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>

休息一下

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

JavaScript_第一天相关推荐

Python深度学习篇
Python深度学习篇一<什么是深度学习> Excerpt 在过去的几年里,人工智能(AI)一直是媒体大肆炒作的热点话题.机器学习.深度学习和人工智能都出现在不计其数的文章中,而这些文章 ...
php动态引入js文件路径问题,JavaScript_动态加载外部css或js文件，原理解析：第一步：使用dom创 - phpStudy...
原理解析:第一步:使用dom创建应用:1.提高代码的复用,减少代码量:2.添加一个javascript控制器和 session可以实现动态改变页面样式:3.由于是页面是从上到下依次加载文件的,并且边 ...
Java 获取当前时间之后的第一个周几，java获取当前日期的下一个周几
Java 获取当前时间之后的第一个周几,java获取当前日期的下一个周几 //获得入参的日期 Calendar cd = Calendar.getInstance(); cd.setTime(date ...
使用myeclipse的第一步
使用myeclipse的第一步将以下代码copy放在一个包中运行,然后在控制台输入任意字符,回车,然后控制台打印一串密匙,这里你输入的就是账号,控制台返回的就是注册码,点击MyEclipse-> ...
中级实训第一天的自学报告
目录[阅读时间:约10分钟] 中级实训第一天的自学报告姓名:隐藏敏感信息学号:隐藏敏感信息一.Vi/Vim 二.Java 三.Ant 四.Junit [附加]五.SonarQube [附加]六. ...
提高班第三周周记（中秋第一天）
这是第三周,也是中秋节.没有月饼的中秋节.但我过得很充实.我很快乐,发自内心的. 中秋第一天早上贾琳师哥讲课.讲他为什么辞职来这里.他的确学成,有着令人羡慕的工资.可是他的问题让我触动. 提到了邓稼先 ...
LeetCode中等题之在排序数组中查找元素的第一个和最后一个位置
题目给定一个按照升序排列的整数数组 nums,和一个目标值 target.找出给定目标值在数组中的开始位置和结束位置. 如果数组中不存在目标值 target,返回 [-1, -1]. 进阶: 你可以 ...
王道考研计算机网络笔记第一章：概述计算机网络体系结构
本文基于2019 王道考研计算机网络: 2019 王道考研计算机网络个人笔记总结后续章节将陆续更新- 目录一.概念.功能.组成.分类 1. 计算机网络的概念 2. 计算机网络功能 3. 计算 ...
Shiro第一个程序:官方快速入门程序Qucickstart详解教程
目录一.下载解压二.第一个Shiro程序 1. 导入依赖 2. 配置shiro配置文件 3. Quickstart.java 4. 启动测试三.shiro.ini分析四.Quickstart. ...

JavaScript_第一天

JavaScript_第一天相关推荐

最新文章

热门文章