1 全局函数概述
某个对象的方法，自定义的方法，并非特定于某个对象
.全局函数可用于所有内建的JavaScript对象
.常用的全局函数有：
parseInt/parseFloat
isNaN
eval
encodeURI / decodeURI --实现对uri的编码和解码
............
1) encodeURI与decodeURI
.encodeURI(): 把字符串作为URI进行编码
.decodeURI()：对encodeURI()函数编码过的URI进行解码
eg:
function test1(){
var s = "http://sss.jsp?name=张三&code=李四";
var r1 = encodeURI(s);
alert(r1);
var r2 = decodeURI(r1);
alert(r2);
}
<input type="button" value="实验全局函数"
οnclick="test1();" />
2) eval函数 -- 计算表达式或者执行语句
用于计算某个字符串，以得到结果；或者用于执行其中的JavaScript代码
- 只接受原始字符串作为参数
- 如果参数中没有合法的表达式和语句，则抛出异常
eg:
var str = "1+2*3";
alert(str); // 1+2*3
alert(eval(str)); //7
var str1 = "alert('hello');"
alert(eval(str1)); //hello
eg:
myScript.js
//模拟简单计算器
function calculater(s){
//如果单击的是=，计算；否则，拼接
if(s=="="){
var r = eval(document.getElementById("txtNumber").value);
document.getElementById("txtNumber").value = r;
}
else{
document.getElementById("txtNumber").value += s;
}
}
<html>
<head>
<script language="javascript" src="myScript.js"></script>
</head>
<body>
<form>
<input type="button" value="1" οnclick="calculater(1);" />
<input type="button" value="2" οnclick="calculater(2);" />
<input type="button" value="3" οnclick="calculater(3);" />
<input type="button" value="+" οnclick="calculater('+');" />
<input type="button" value="-" οnclick="calculater('-');" />
<input type="button" value="=" οnclick="calculater('=');" />
<br/>
<input type="text" id="txtNumber" />
</form>
</body>
</html>
习题：
1.统计文本框中录入的各字符的个数
2.彩票双色球生成器
2 应用 ：DHTML (dynamic HTML) --动态HTML效果，比如浏览器信息、屏幕信息等
1、js中 将整个窗口均实现对象化，结构如下：
window 对象
document -- html 文档
screen --
history
location
event
navigator
2、window对象：父对象，最大层
1）打开对话框窗口：
window.alert("ss"); --阻塞线程的方式，不关闭则不往下执行
window.confirm(); --确认 ，有返回值boolean类型
window.prompt(); --输入框，用的少，样式无法控制，不能验证
eg:
function testConfirm(){
var r = window.confirm("Are you really ...");
alert(r);
window.prompt("请输入ID:");
}
<input type="button" value="delete"
οnclick="testConfirm();"/>
2）打开新窗口：
window.open(url); //重复打开
window.open(url,name); //不重复打开
window.opent(url,name,config); //config是控制外观显示的,如宽和高
//var config="toolbar=yes,location=no,width=500,height=300";
eg:
function testConfirm(){
/*
var r = window.confirm("Are you really ...");
alert(r);
window.prompt("请输入ID:");
*/
//window.open("http://baidu.com","name");
/*
var config="toolbar=yes,location=no,width=500,height=300";
window.open("http://baidu.com","name",config);
*/
window.open("http://baidu.com","name","width=500,height=300");
}
<input type="button" value="delete"
οnclick="testConfirm();"/>
3)定时器：
.多用于页面动态时钟、制作倒计时、跑马灯效果等
.周期性时钟
.一次性时钟
<1>周期性定时器
.setInterval(exep,time); ——周期性触发代码exep setInterval--设置间隔
- exep: 执行语句
- time：时间周期，单位毫秒
- 返回已经启动的定时器对象
.clearInterval(tID): 停止启动的定时器
- tID: 启动的定时器对象
eg:
function showTime(){
//将当前时间显示在一个文本框中
var t = new Date();
document.getElementById("txtTime").value = t.toLocaleTimeString();
}
var timer; //全局变量
//启动时钟
function startClock(){
timer = window.setInterval(showTime,1000);
//每个1秒调showTime对象,不需要括号,返回一个定时器对象
}
//停止时钟
function stopClock(){
window.clearInterval(timer);
}
<input type="text" id="txtTime"/>
<input type="button" value="显示时间" οnclick="startClock();" />
<input type="button" value="停止时钟" οnclick="stopClock();" />
<2>一次性定时器；
.setTimeout(exep,time):一次性触发代码exep
.clearTimeout(tID) :停止启动的定时器，tID启动的定时器对象
eg:
var timer1;
//5s后弹出一个hello
function wait(){
timer1 = window.setTimeout("alert('hello');",5000);
}
function cancelAlert(){
window.clearTimeout(timer1);
}
<input type="button" value="5s后将弹出一个hello" οnclick="wait();" />
如果想取消请点击<a href="javascript:cancelAlert();" >这里</a>
<!--href="执行一段脚本代码"-->
3、document对象
整个html文档，操作文档中的任何内容，通过document将整个html文档作为一颗节点树（树形结构）
---DOM 便于查询和遍历
问题：如何在脚本中动态的修改文档的内容--用DOM
DOM概述
.DOM(document object model):文档对象模型 （html元素是文档对象）
.HTML文档中的所有节点组成一个文档树（或节点树）
- 树起始于文档节点
- document对象是一棵文档树的根
- HTML文档中的每个元素、属性、文本等都代表着树中的一个节点
a）找到目标节点
方法一：精确查找(与位置无关)：根据元素ID查找节点
document.getElementById(idValue)--返回元素对象
方法二：根据层次关系查找节点
. xxx.parentNode、firstChild和lastChild
- 遵循文档的层次结构，查找单个节点
. childNodes
- 遵循文档的层次结构，查找多个节点
方法三：根据元素的名称找
(在某个节点的所有后代里（子节点，孙子节点）查找某种类型的元素)
xxx.getElementsByTagName
eg:document.getElementsByTagName("a")
tableObj.getElementsByTagName("tr")
tableObj.getElementsByTagName("td")
b) 读取或者修改节点
规则一：将html标签对象化
简单属性： .value/src
<input type="text" value="mary" />
<img src="" />
复杂属性： .style.color/fontSize （有两个单词font-size -> fontSize）
<p style="color:red;"></p>
规则二：元素标签中间的内容 -- .innerHTML
规则三：修改样式类
xxx.className = "";
规则四：得到某个元素对象，其类型未知
xxx.nodeName -- 当未知节点类型时，使用该属性获得节点的名称(全大写方式)
if(xxx.nodeName == "IMG")
xxx.src = "";
事件
onXXX = "return false;" --取消某事件，也就是点了和没点一样
如：<!--submit按钮一点就会刷新,使用return false取消事件-->
<input type="submit" value="保存"
οnclick="return false;" />
四个规则eg1:
myScript.js
//实验操作
function testDocument(){
var imgObj = document.getElementById("img1"); //图片对象
imgObj.src = "images/cat.jpg";
//修改段落：字体颜色、背景色、字体大小、段落文本
var pObj = document.getElementById("p1");//段落对象
pObj.style.color = "red";
pObj.style.backgroundColor = "silver";
//background-color 变为backgroundColor 标识符无-
pObj.style.fontSize = "25";
//p里边的HTML内容
pObj.innerHTML = "new text";
//修改某元素的样式
document.getElementById("h2").className = "style1";
alert(imgObj.nodeName); //IMG
//根据上下层次关系找到目标节点
//知道选择列表有多少个选项
var obj = document.getElementById("sell");
alert(obj.getElementsByTagName("option").length);
//alert(obj.childNodes.length); //7 因为流文件里面有空白也算
//如何只统计option的个数，而不是所有子节点的个数
var count = 0;
for(var i=0;i<obj.childNodes.length;i++){
if(obj.childNodes[i].nodeName == "OPTION")
count++;
}
alert(count); //3
}
day05.html
<html>
<head>
<script language="javascript" src="myScript.js"></script>
<style>
h2.style1{
border-top:1px solid red;
border-right:2px solid blue;
}
</style>
</head>
<body>
<form>
<input type="button" value="实验操作"
οnclick="testDocument();" />
<!--演示规则三:h2-->
<h2 class="style1">h2标记文本</h2> <!--样式写死了-->
<h2 id="h2">h2 另一个标记文本</h2>
<p id="p1">段落文本</p>
<img id="img1" src="images/clock.jpg" />
<br/>
<select id="sell">
<option>aaa</option>
<option>bbb</option>
<option>ccc</option>
</select>
</form>
</body>
</html>
页面显示结果如下：
eg2:
.js
//验证用户名
function validName(){
//得到录入的用户名
var name = document.getElementById("txtName").value;
//验证
var r = /^[a-z]{3,5}$/;
//根据验证结果显示不同的样式
if(r.test(name))
document.getElementById("nameInfo").className = "success";
else
document.getElementById("nameInfo").className = "fail";
//添加返回
return r.test(name);
}
//验证年龄：两位数字
function validAge(){
//得到录入的用户名
var age = document.getElementById("txtAge").value;
//验证
var r = /^\d{2}$/;
//根据验证结果显示不同的样式
if(r.test(age))
document.getElementById("ageInfo").className = "success";
else
document.getElementById("ageInfo").className = "fail";
//添加返回
return r.test(age);
}
//验证所有的数据
function validDatas(){
//验证name 和 age ，return true或retur false
var r1 = validName();
var r2 = validAge();
return r1&&r2;
}
.html
<html>
<head>
<script language="javascript" src="myScript.js"></script>
<style>
span.success {
color:green;
border:1px solid black;
}
span.fail{
color:red;
border:1px solid blue;
}
</style>
</head>
<body>
<!--表单用于向服务器传输数据-->
<form>
<!--新示例-->
<br/>
Name: <input type="text" id="txtName" οnblur="validName();"/>
<span id="nameInfo">3-5个小写字母</span>
<!--需要用标记包起来，因为等会要找到它，并修改，span保持在同一行,行内分组，便于修改样式-->
<br/>
Age: <input type="text" id="txtAge" οnblur="validAge();" />
<span id="ageInfo">2位数字</span>
<br/>
<!--submit按钮一点就会刷新-->
<input type="submit" value="保存" id="submit"
οnclick="return validDatas();" />
</form>
</body>
</html>
页面显示结果如下：
eg3:
//增加购物数量
function add(btnObj){
//得到td
var tdObj = btnObj.parentNode;
//得到td的所有子元素，找到那个文本框
for(var i=0;i<tdObj.childNodes.length;i++){
var childNode = tdObj.childNodes[i];
if(childNode.nodeName == "INPUT"&&childNode.type == "text")
{
//得到旧数据，操作，并显示
var data = parseInt(childNode.value);
data++;
childNode.value = data;
}
}
calTotal();
}
//减少购物数量
function sub(btnObj){
//得到td
var tdObj = btnObj.parentNode;
//得到td的所有子元素，找到那个文本框
for(var i=0;i<tdObj.childNodes.length;i++){
var childNode = tdObj.childNodes[i];
if(childNode.nodeName == "INPUT"&&childNode.type == "text")
{
//得到旧数据，操作，并显示
var data = parseInt(childNode.value);
if(data>0){
data--;
childNode.value = data;
}
}
}
calTotal();
}
//计算小计和总计
function calTotal(){
//得到表格对象的所有的行
var tableObj = document.getElementById("shoppingCart");
var rows = tableObj.getElementsByTagName("tr"); //rows是一个数组对象
//循环从第二行开始
var total = 0;
for(var i=1;i<rows.length;i++){
var curRow = rows[i];
//得到第一格中的价格
var price = curRow.getElementsByTagName("td")[0].innerHTML;
//得到第二格中的第二个input的value--数量
var q = curRow.getElementsByTagName("td")[1].getElementsByTagName("input")[1].value;
//算完，写入第三格
var sum = parseFloat(price)*parseFloat(q);
curRow.getElementsByTagName("td")[2].innerHTML = sum.toFixed(2);
//总计
total += sum;
}
//显示
document.getElementById("spanTotal").innerHTML = total.toFixed(2);
}
<form>
<!--示例3-->
<br/>
<h2>购物车</h2>
<table border="1" id="shoppingCart">
<tr>
<td>价格</td>
<td>数量</td>
<td>小计</td>
</tr>
<tr>
<td>10.00</td>
<td>
<input type="button" value="-" οnclick="sub(this);"/>
<input type="text" value="1"/>
<input type="button" value="+" οnclick="add(this);"/>
<!--this代表当前对象，input,不用id，用this，便于维护-->
</td>
<td>10.00</td>
</tr>
<tr>
<td>20.00</td>
<td>
<input type="button" value="-" οnclick="sub(this);"/>
<input type="text" value="1"/>
<input type="button" value="+" οnclick="add(this);"/>
</td>
<td>20.00</td>
</tr>
</table>
</form>
写死在页面上：display:none;
div.style.display = "block";
div.style.display = "none";
页面结果显示如下：
扫一扫
302
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
