《阿勇java建站教程》1.6-javaScript使用
1.6-javaScript使用
感谢你阅读这篇文章，希望你继续阅读《阿勇java建站教程》的其他文章！
上节内容（《1.5.1-css兼容》）简单介绍了css hack，本节内容的重点将是介绍js的使用。
javaScript不是java，那么为什么名字那么像呢？其实是js借助了java的知名度提高了自己的知名度一吧，历史渊源就不在此重述了！虽然js和java不是一个东西，但是他们很像，不单单是名字像，从语法，运算符等都非常相似。js也叫客户端脚本，顾名思义就是运行在客户端（浏览器）的脚本语言。从这点来看，js的可移植性非常高，一段代码能在各种浏览器中运行，当然浏览器能编译执行js才行！
js能灵活的操作页面标签，对页面标签的属性、样式都能进行修改，并且能动态增加标签、删除标签。可以说js的使用对用户交互起到了极大的作用。接下来，我将简单介绍一下js的基本使用：
js要操作标签，要先定位一个标签，甚至是一类标签。常用的方法有：
根据标签的id属性获取该标签：document.getElementById("标签id属性")或者直接使用标签id属性
根据标签名获取标签数组：document.getElementsByTagName("标签名")或者使用document.all.tags("标签名")
要在页面是使用js脚本，首先要在页面中引入一个特殊的标签:<script type="text/javascript"></script>。该标签所处的位置并没有明确的规定，一般情况下都放在<head></head>中，但是为了提高页面的相应速度，建议将标签放在<body></body>中，并且位于最后，这样做在浏览器解析页面内容时不会因为解析js耗费太多时间，使得页面内容被延迟解析。
js允许用户自定义函数使用：function 函数名(参数){函数实现}，除此之外，js也有一系列自带的函数比如：截取字符串，数字转换，数学方法，日期函数等等，在日常的开发中经常被使用，在日常的使用中要注意积累。
很多时候，js的函数在监听标签元素的事件时被调用。标签元素有很多，比较常用的有：鼠标单机元素事件-onclick；输入框得到焦点事件：onfocus；输入框失去焦点事件：onblur；监听键盘输入事件：onkeyup，onkeydown，onpress；等等许多，在实际运用时注意积累。
下面我将用js开发一个简易的计算器。源代码如下,：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=GB2312">
<title>简易计算器</title>
<style>
input{
width:30px;
}
</style>
</head>
<body onload="hello();"><!--监听body的onload事件：浏览器加载页面时触发此事件-->
<center><!--居中显示-->
今天是：<label name="tellDate"></label>
<br><!--换行-->
<input type="text" style="width:90px;" readonly="true" id="calDisplay" value=""/>
<input type="text" style="width:30px;" readonly="true" id="calMethod" value=""/>
<br>
<input type="button" value="1"/><input type="button" value="2"/><input type="button" value="3"/><input type="button" value="+"/>
<br>
<input type="button" value="4"/><input type="button" value="5"/><input type="button" value="6"/><input type="button" value="-"/>
<br>
<input type="button" value="7"/><input type="button" value="8"/><input type="button" value="9"/><input type="button" value="*"/>
<br>
<input type="button" value="0"/><input type="button" value="c"/><input type="button" value="="/><input type="button" value="/"/>
</center>
<script>
//全局变量,保存输入的数字
var press1=0;
//无参函数
function hello(){
//弹框效果
alert("欢迎阅读《阿勇java建站教程》系列教程！");
//局部变量
//定义日期时间对象
var now = new Date();
//js是弱类型语言，可以不用var,用+连接字符串
today=now.getFullYear()+"年"+(now.getMonth()+1)+"月"+now.getDate()+"日";
//修改<label>标签内容
document.all.tags("label")[0].innerText=today;
//为input 按钮添加onclick事件监听
var bottons=document.getElementsByTagName('input');
for(i=1;i<bottons.length;i++){
bottons[i].onclick=btnPress;
}
}
//按钮点击函数
function btnPress(){
//取得按钮的value属性值
var btnVal=this.value;
//input button的value不是数字
if(isNaN(parseInt(btnVal))){
//判断+，-，x，÷运算符号，及清屏（c），退格（←）操作,显示在运算符屏幕上
//==符号为等值判断
if(btnVal=="c"){
document.getElementById("calMethod").value="";
document.getElementById("calDisplay").value=""
}else if(btnVal=="="){
//计算数值
var press2=document.getElementById("calDisplay").value;
//获得运算符
var calMe=document.getElementById("calMethod").value;
//组成算式
var toCal=press1+calMe+press2;
//eval()方法能根据字符串执行
document.getElementById("calDisplay").value=eval(toCal);
}else{
//保存当前输入数值
press1=parseInt(document.getElementById("calDisplay").value);
document.getElementById("calDisplay").value="";
document.getElementById("calMethod").value=btnVal;
}
}else{
//input button的value是数字
//显示在计算器“显示屏上”
var dis=document.getElementById("calDisplay");
//设置“显示屏上”的value属性值,js提供连接字符串函数
dis.value=dis.value.concat(btnVal);
//alert(parseInt(btnVal));
}
}
</script>
</body>
</html>
本文原创写的不好的地方欢迎大家与我一起交流（微信号:zhyy22145），转载请注明出处！-《阿勇java建站教程》1.6-javaScript使用
http://www.ya178.com/public/detailUA-10783-1.html
《阿勇java建站教程》统一交流:http://www.ya178.com/public/detailUA-10783-1.html
分享到：
相关推荐
[计算机网络实验与学习指导——基于Cisco Packet Tracer模拟器（第2版）][叶阿勇 等]的配套实验pka
史上最牛文本编辑器。请大家免费使用。如有不妥之处请谅解。
计算机网络实验与学习指导-基于Cisco Packet Tracert模拟器-程序源代码pka文件，为叶阿勇等主编《计算机网络实验与学习指导》的实验内容，基于Cisco Packet Tracert6.0.1完成，经过测试过的。希望对学习思科网络的...
'* 免费软件，欢迎使用！请勿用于直接出售或其它商业用途。 '* '* 作者主页：pc-soft.cn e-mail：fxy_2002@163.com '* '* 程序功能：将 GB、BIG5、UTF-8 文件相互转换，方便的批量处理能力， '* 主要用于网站文件...
软件使用VB6开发，如果在某些电脑上无法使用，多半是缺少运行库的原因。 碰到这种情况，请在互网上下载 MSVBVM60.DLL 文件到软件所在目录即可。这个 文件使用很普遍，许多地方可以下载。如果找不到，微软的网站一定...
豆葵 GB/BIG5/UTF-8 文件编码批量转换工具 是一款单一文件与批量转换编码工具将 GB、BIG5、UTF-8 文件相互转换，方便的批量处理能力，主要用于网站文件编码方式的整体转换上。 豆葵 www.doukui.cn 是立足垂直搜索...
计算机网络实验与学习指导书叶阿勇-基于Packet Tracer6.0版本计算机网络实验与学习指导书叶阿勇-基于Packet Tracer6.0版本
- **网络测试**：使用ping命令等工具验证网络连通性和设备间的数据传输。 #### 总结 本文详细介绍了双绞线的基本知识、分类、有效距离等内容，并重点解析了两个实验的具体内容和实训目标。实验1通过非屏蔽双绞线的...
计算机网络实验完整的指导书，以及完全写好的实验报告。报告中有实验过程的数据截图，抓包的数据截图等等
EA名称：pirate-EA02.04.1 适用于早盘剥头皮EA EA用法： 1：可自定义早盘交易得起始时间和接受时间 2：可采用固定手数，也可以采用动态手数 3：对点差要求有限制，越低越好 EA加载周期：30分钟 ...
本文将通过分析阿勇的自荐信，来深入探讨如何撰写一份能够吸引雇主的自荐信。 首先，阿勇通过自荐信向潜在雇主传达了他扎实的计算机科学背景。他的自我介绍从教育背景开始，说明自己即将毕业于广东大学的计算机科学...
这些更新信息包括文档同步更新到了Swift 4.2的时间点（2018年07月18日），以及一些与维护网站相关的个人或团队的感谢（例如@唯有学习、十步奶一人、阿勇等）。 在知识内容的介绍上，文件提供了Swift编程语言的基础...
通过实验，学生能够深入地了解网络协议、网络设备的使用以及网络故障排查的方法。本实验资源旨在提供全面的指导，帮助学生掌握网络命令的运用，提升网络管理与维护的能力。 实验报告的书写要求严谨且规范，包括实验...
'* 免费软件，欢迎使用！请勿用于直接出售或其它商业用途。 '* '* 作者主页：pc-soft.cn e-mail：fxy_2002@163.com '* '* 程序功能：将 GB、BIG5、UTF-8 文件相互转换，方便的批量处理能力， '* 主要用于网站文件...
在 ISP1 和 ISP2 之间的链路使用 PPP 协议。我们可以通过观察数据包的封装格式来了解 PPP 协议的工作原理。 PPPoE 协议的封装格式 在这个实验中，我们也学习了 PPPoE 协议的封装格式。PPPoE 协议是基于 PPP 协议的...
计算机网络
为了深入理解计算机网络的运作机制，掌握网络设备的配置与使用，计算机网络实训成为一门重要的实践课程。本文以计算机网络实训书为切入点，详细探讨网络设备的基础知识、传输介质的特点，以及实验实训在学习计算机...
选项A中的0xFEFE是IS-IS（Intermediate System to Intermediate System）协议在网络层使用的协议标识符，用于区分不同的网络层协议。 ### 7. IS-IS Level类型 IS-IS协议中的Level-1和Level-2分别代表区域内的路由和...
包括「精确搜寻」及「模糊搜寻」- 在「台字田」研究台语汉字的在来写法- 用「斗拍字」的语音合成技术，听听台语字词的准确发音版本历史：v0.2: 增加介面语言设定功能v0.1: 最初版本感谢：- aióng 阿勇 提供台语介面...
阿勇的父母都是老师，父母的言传身教，让他自小就养成了良好的学习习惯，学习起来格外卖力；乐乐格外宠爱自己选择的这个专业，除了课堂认真学习外，他还在课后乐观地阅读与专业相关的书籍，了解本专业最前端的信息。...