《阿勇java建站教程》1.6-javaScript使用
《阿勇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
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