文章目录
完成编程作业:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
input{
width: 40px;
height: 40px;
}
#qw{
position: relative;
left: 500px;
}
</style>
<script type="text/javascript">
function sum() {
var q1 = document.getElementById("q1").value;
var q2 = document.getElementById("q2").value;
var q3 = parseInt(q1) * parseInt(q2);
document.getElementById("q3").value = q3;
}
function changeSize() {
var cv = document.getElementById("fs").value;
document.getElementById("li").style.fontSize = cv + "px";
}
function changeColor() {
var cv = document.getElementById("cl").value;
document.getElementById("li").style.color = document.getElementById("cl").value;
}
</script>
</head>
<body>
<h1 id="li">陆琴</h1>
<select id="fs" onchange="changeSize();">
<option value="10">10px</option>
<option value="15">15px</option>
<option value="20">20px</option>
<option value="25=">25px</option>
<option value="30">30px</option>
<option value="35">35px</option>
<option value="40">40px</option>
<option value="45">45px</option>
</select>
<select id="cl" onchange="changeColor();">
<option value="blue">blue</option>
<option value="green">green</option>
<option value="yellow">yellow</option>
<option value="red">red</option>
<option value="black">black</option>
<option value="gold">gold</option>
<option value="palegoldenrod">palegoldenrod</option>
<option value="pansy">pansy</option>
</select>
</body>
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
input {
height: 50px
width: 60px;
}
</style>
<script type="text/javascript">
function sum() {
//1
var j1 = document.getElementById('j1').value;
var j2 = document.getElementById('j2').value;
var result = parseInt(j1) + parseInt(j2);
document.getElementById("result").value = result;
}
</script>
</head>
<body>
<input type="text" id="j1" value=""/> + <input type="text" id="j2" value="" />
<input type="button" value=" =" onclick="sum();" />
<input type="text" id="result" />
</body>
</html>
要求:完成一个字体样式设置功能的代码编写,可以改变字体的大小和颜色; 提示:定义两个select框分别表示字体大小和颜色,注意使用option中的value。
问答题:
1 、JavaScript的发展历史;
当 Netscape Navigator 崭露头角时,Nombas 开发了一个可以嵌入网页中的 CEnvi 的版本。这些早期的试验被称为 Espresso Page(浓咖啡般的页面),它们代表了第一个在万维网上使用的客户端语言。而 Nombas 丝毫没有料到它的理念将会成为万维网的一块重要基石。
当网上冲浪越来越流行时,对于开发客户端脚本的需求也逐渐增大。此时,大部分因特网用户还仅仅通过 28.8 kbit/s 的调制解调器连接到网络,即便这时网页已经不断地变得更大和更复杂。而更加加剧用户痛苦的是,仅仅为了简单的表单有效性验证,就要与服务器进行多次地往返交互。设想一下,用户填完一个表单,点击提交按钮,等待了 30 秒的处理后,看到的却是一条告诉你忘记填写一个必要的字段。
那时正处于技术革新最前沿的 Netscape,开始认真考虑开发一种客户端脚本语言来解决简单的处理问题。
当时工作于 Netscape 的 Brendan Eich,开始着手为即将在 1995 年发行的 Netscape Navigator 2.0 开发一个称之为 LiveScript 的脚本语言,当时的目的是在浏览器和服务器(本来要叫它 LiveWire)端使用它。Netscape 与 Sun 及时完成 LiveScript 实现。
就在 Netscape Navigator 2.0 即将正式发布前,Netscape 将其更名为 JavaScript,目的是为了利用 Java 这个因特网时髦词汇。Netscape 的赌注最终得到回报,JavaScript 从此变成了因特网的必备组件。
2、JavaScript和Java的区别;
虽然JavaScript与Java有紧密的联系,但却是两个公司开发的不同的两个产品。
Java是SUN公司推出的新一代面向对象的程序设计语言,特别适合于Internet 应用程序开发;而JavaScript是Netscape公司的产品,其目的是为
了扩展Netscape Navigator功能,而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言,它的前身是Live Script;
而Java的前身是Oak语言。
下面对两种语言间的异同作如下比较:
基于对象和面向对象
Java是一种真正的面向对象的语言,即使是开发简单的程序,必须设计对象。
JavaScript是种脚本语言,它可以用来制作与网络无关的,与用户交互作用的复杂软件。它是一种基于对象(Object Based)和事件驱动(Event Driver)的编程语言。因而它本身提供了非常丰富的内部对象供设计人员使用。
解释和编译
两种语言在其浏览器中所执行的方式不一样。Java的源代码在传递到客户端执行之前,必须经过编译,因而客户端上必须具有相应平台上的仿真器或解释器,它可以通过编译器或解释器实现独立于某个特定的平台编译代码的束缚。
JavaScript是一种解释性编程语言,其源代码在发往客户端执行之前不需经过编译,而是将文本格式的字符代码
发送给客户编由浏览器解释执行。
强变量和弱变量
两种语言所采取的变量是不一样的。
Java采用强类型变量检查,即所有变量在编译之前必须作声明。如:
Integer x;
String y;
x=1234;
x=4321;
其中X=1234说明是一个整数,Y=4321说明是一个字符串。
JavaScript中变量声明,采用其弱类型。即变量在使用前不需作声明,而是解释器在运行时检查其数据类型,如:
x=1234;
y="4321";
前者说明x为其数值型变量,而后者说明y为字符型变量。
代码格式不一样
Java是一种与HTML无关的格式,必须通过像HTML中引用外媒体那么进行装载,其代码以字节代码的形式保存
在独立的文档中。
JavaScript的代码是一种文本字符格式,可以直接嵌入HTML文档中,并且可动态装载。编写HTML文档就像编
辑文本文件一样方便。
嵌入方式不一样
在HTML文档中,两种编程语言的标识不同,JavaScript使用来标识,而Java使用
…来标识。
静态联编和动态联编
Java采用静态联编,即Java的对象引用必须在编译时的进行,以使编译器能够实现强类型检查。
JavaScript采用动态联编,即JavaScript的对象引用在运行时进行检查,如不经编译则就无法实现对象引用的检
查。
3、JavaScript的代码格式规范有哪些。
代码规范通常包括以下几个方面:
变量和函数的命名规则
空格,缩进,注释的使用规则。
其他常用规范……
规范的代码可以更易于阅读与维护。
代码规范一般在开发前规定,可以跟你的团队成员来协商设置。