学习周记 Week5
1.学习目标:
掌握JavaScript基本操作
2.学习内容:
2.1 JavaScript简介
JavaScript 是 Web 的编程语言,是 web 开发人员必须学习的 3 门语言中的一门。
HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 网页的行为
2.2 JavaScript使用方法
如需在 HTML 页面中插入 JavaScript,用 < script> 标签。
2.2.1 JavaScript内部引用
脚本可被放置在 HTML 页面的 < body> 和 < head> 部分中。
< script> 和 < /script> 之间的代码行包含了 JavaScript,会告诉 JavaScript 在何处开始和结束
<script>
alert("我的第一个 JavaScript");
</script>
比如,在本例中,JavaScript被放到< head> 标签中。
(运行结果为:该函数会在点击按钮时被调用)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function myFunction(){
document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>
而在本例中,JavaScript被放到< body>标签中,依旧可以被调用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个 Web 页面</h1>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>
<script>
function myFunction(){
document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</body>
</html>
二者的运行结果一致。
运行前:
点击按钮,运行结果之后:
2.2.2 如何引用外部的JavaScript
上文列举的两种方式为内部引用,而外部引用为把脚本保存到外部文件中。
*外部文件通常包含被多个网页使用的代码。
*外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件,请在 < script> 标签的 “src” 属性中设置该 .js 文件:
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>
<p><b>注释:</b>myFunction 保存在名为 "myScript.js" 的外部文件中。</p>
<script src="myScript.js"></script>
</body>
</html>
注:myFunction 保存在名为 “myScript.js” 的外部文件中。
此段代码运行结果与内部引用的两种模式运行结果一致。
2.3 JavaScript基本语法和语句
JavaScript 是一个脚本语言。
它是一个轻量级,但功能强大的编程语言。
2.3.1 JavaScript 关键字
JavaScript 关键字用于标识要执行的操作。
和其他任何编程语言一样,JavaScript 保留了一些关键字为自己所用。
2.3.2 JavaScript 数据类型
JavaScript 有多种数据类型:数字,字符串,数组,对象等等:
2.3.3 JavaScript 字母大小写
JavaScript 对大小写是敏感的。
当编写 JavaScript 语句时,请留意是否关闭大小写切换键。
函数 getElementById 与 getElementbyID 是不同的。
同样,变量 myVariable 与 MyVariable 也是不同的。
2.4 JavaScript对象、函数和事件
JavaScript 对象是拥有属性和方法的数据。
2.4.1 对象定义
你可以使用字符来定义和创建 JavaScript 对象:
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>创建 JavaScript 对象。</p>
<p id="demo"></p>
<script>
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
document.getElementById("demo").innerHTML =
person.firstName + " 现在 " + person.age + " 岁.";
</script>
</body>
</html>
运行结果:
创建对象输出的文本对象,与单纯输出文本不同,是由语句读取原本创建并存储的对象,然后再进行输出。
比如在原有语句基础上加上eyeColor后,输出结果会加上eyeColor。
person.firstName + " 现在 " + person.age + " 岁." + "眼睛颜色是" + person.eyeColor;
2.4.2 访问对象属性
可以通过两种方式访问对象属性:
方法一:person.lastName;
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>
有两种方式可以访问对象属性:
</p>
<p>
你可以使用 .property 或 ["property"].
</p>
<p id="demo"></p>
<script>
var person = {
firstName : "John",
lastName : "Doe",
id : 5566
};
document.getElementById("demo").innerHTML =
person.firstName + " " + person.lastName;
</script>
</body>
</html>
方法二:person[“lastName”];
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>
有两种方式可以访问对象属性:
</p>
<p>
你可以使用 .property 或 ["property"]。
</p>
<p id="demo"></p>
<script>
var person = {
firstName: "John",
lastName : "Doe",
id : 5566
};
document.getElementById("demo").innerHTML =
person["firstName"] + " " + person["lastName"];
</script>
</body>
</html>
运行结果:
2.5 对象方法
对象的方法定义了一个函数,并作为对象的属性存储。
对象方法通过添加 () 调用 (作为一个函数)。
该实例访问了 person 对象的 fullName() 方法:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>创建和使用对象方法。</p>
<p>对象方法作为一个函数定义存储在对象属性中。</p>
<p id="demo"></p>
<script>
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function()
{
return this.firstName + " " + this.lastName;
}
};
document.getElementById("demo").innerHTML = person.fullName();
</script>
</body>
</html>
2.6 函数
JavaScript 使用关键字 function 定义函数。
函数可以通过声明定义,也可以是一个表达式。
2.6.1 函数声明
函数声明的语法 :
function functionName(parameters) {
//执行的代码
}
2.6.2 自调用函数
函数表达式可以 “自调用”。
自调用表达式会自动调用。
如果表达式后面紧跟 () ,则会自动调用。
不能自调用声明的函数。
通过添加括号,来说明它是一个函数表达式:
(function () {
var x = "Hello!!"; // 我将调用自己
})();
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>函数可以自动调用:</p>
<p id="demo"></p>
<script>
(function () {
document.getElementById("demo").innerHTML = "Hello! 我是自己调用的";
})();
</script>
</body>
</html>
运行结果:
2.6.3 作为值使用的函数
JavaScript 函数作为一个值使用:
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>函数可作为一个值:</p>
<p>x = myFunction(4,3) 或 x = 12</p>
<p>两种情况下,x 的值都为 12。</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
var x = myFunction(4, 3);
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
运行结果:
2.7 事件
我们可以在事件发生时执行 JavaScript,比如当用户在 HTML 元素上点击时。
如需在用户点击某个元素时执行代码,请向一个 HTML 事件属性添加 JavaScript 代码:
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
</body>
</html>
运行结果为点击文本之后,产生文字变化。
运行结果:
3.练习:
练习题网址:http://js.7vnet.com/javascript/js004/js001.html
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JAVAscript练习</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="apple-touch-icon-precomposed" href="../../logo_icon.png"/>
<link href="../../css/style.css" rel="stylesheet">
<style>
#div2 div{background:black;font-size: 50px;color: white;}
#div3.box-re{position: inherit;}
#div3 > div{width: 100%;height: 60px;transition:none;}
.jingguo{float:left;display: inline;padding: 20px;cursor: pointer;background: #efefef;}
.chuxian{float:left;display: inline;padding: 20px;margin-left: 20px;display: none;cursor: pointer;background: #efefef;}
</style>
<script>
function toDou (n)
{
if(n<10)
{
return '0'+n;
}
else
{
return ''+n;
}
}
window.onload=function ()
{
var aBtn1=document.getElementById('div1').getElementsByTagName('button');
aBtn1[0].onclick=function ()
{
var i=0;
function show ()
{
alert('这是弹出框,第'+i+'次弹出');
return i+=1;
}
setInterval(show,2000)
}
aBtn1[1].onclick=function ()
{
function show ()
{
alert('这是弹出框');
}
setTimeout(show,2000);
}
var timer1=null;
aBtn1[2].onclick=function ()
{
var i=0;
function show ()
{
alert('这是弹出框,第'+i+'次弹出');
return i+=1;
}
timer1=setInterval(show,1000);
}
aBtn1[3].onclick=function ()
{
clearInterval(timer1);
}
var oDiv2=document.getElementById('div2');
var aBtn2=oDiv2.getElementsByTagName('button');
var oDte2=new Date;
aBtn2[0].onclick=function ()
{
var a=oDte2.getHours();
alert('当前时间是:'+a+'时');
}
aBtn2[1].onclick=function ()
{
var a=oDte2.getMinutes();
alert('当前时间是:'+a+'分');
}
aBtn2[2].onclick=function ()
{
var a=oDte2.getSeconds();
alert('当前时间是:'+a+'秒');
}
var aImg2=oDiv2.getElementsByTagName('img');
function tick ()
{
var oDte3=new Date;
var aStr2=toDou(oDte3.getHours())+toDou(oDte3.getMinutes())+toDou(oDte3.getSeconds());
for(var i=0;i<aStr2.length;i++)
{
aImg2[i].src='js001/images/'+aStr2[i]+'.png';
}
}
setInterval(tick,1000);
tick();
var aSpn3=document.getElementById('div3').getElementsByTagName('span');
var timer3=null;
aSpn3[0].onmouseover=function ()
{
clearTimeout(timer3);
aSpn3[1].style.display='block';
}
aSpn3[0].onmouseout=function ()
{
timer3=setTimeout(function (){
aSpn3[1].style.display='none';
},500)
}
aSpn3[1].onmouseover=function ()
{
clearTimeout(timer3);
aSpn3[1].style.display='block';
}
aSpn3[1].onmouseout=function ()
{
timer3=setTimeout(function (){
aSpn3[1].style.display='none';
},500)
}
}
</script>
<!--<script>
window.οnlοad=function ()
{
var aBtn1=document.getElementById('div1').getElementsByTagName('button');
aBtn1[0].οnclick=function ()
{
setInterval(function ()
{
alert('无休止弹出'+i);
},1000)
}
aBtn1[1].οnclick=function ()
{
setTimeout(function ()
{
alert('只弹出一次');
},1000)
}
var time1=null;
aBtn1[2].οnclick=function ()
{
time1=setInterval(function ()
{
alert('已开始弹出');
},1000)
}
aBtn1[3].οnclick=function ()
{
clearInterval(time1);
}
var oDiv2=document.getElementById('div2');
var aBtn2=oDiv2.getElementsByTagName('button');
var aDiv2=oDiv2.getElementsByTagName('div')[0];
var aImg2=oDiv2.getElementsByTagName('img');
var oDate=new Date;
aBtn2[0].οnclick=function ()
{
alert(oDate.getHours());
}
aBtn2[1].οnclick=function ()
{
alert(oDate.getMinutes());
}
aBtn2[2].οnclick=function ()
{
alert(oDate.getSeconds());
}
function todo(n)
{
if(n<10)
{
return '0'+n;
}
else
{
return ''+n;
}
}
function tick ()
{
var oDate=new Date();
var str1=todo(oDate.getHours())+todo(oDate.getMinutes())+todo(oDate.getSeconds());
for(var i=0;i<aImg2.length;i++)
{
aImg2[i].src='js001/images/'+str1.charAt(i)+'.png';
}
}
setInterval(tick,1000);
tick ();
var aSpn3=document.getElementById('div3').getElementsByTagName('span');
var time1=null;
aSpn3[1].οnmοuseοver=aSpn3[0].οnmοuseοver=function ()
{
clearInterval(time1);
aSpn3[1].style.display='block';
}
aSpn3[1].οnmοuseοut=aSpn3[0].οnmοuseοut=function ()
{
time1=setInterval(function ()
{
aSpn3[1].style.display='none';
},1000)
}
}
/*
function toDou (n)
{
if(n<10)
{
return '0'+n;
}
else
{
return ''+n;
}
}
window.οnlοad=function ()
{
var oDiv1=document.getElementById('div1');
var aBtn1=oDiv1.getElementsByTagName('button');
var time1=null;
aBtn1[0].οnclick=function ()
{
function show ()
{
alert('我是弹出提示框')
}
setInterval(show, 1000);
}
aBtn1[1].οnclick=function ()
{
function show ()
{
alert('我是弹出提示框')
}
setTimeout(show, 2000);
}
aBtn1[2].οnclick=function ()
{
time1=setInterval(function ()
{
alert('我是弹出提示框');
}, 1000)
}
aBtn1[3].οnclick=function ()
{
clearInterval(time1);
}
//例1:获取------------------------------------------------------------
var oDiv2=document.getElementById('div2');
var aBtn2=oDiv2.getElementsByTagName('button');
var oDate1=new Date();
aBtn2[0].οnclick=function ()
{
alert(oDate1.getHours());
}
aBtn2[1].οnclick=function ()
{
alert(oDate1.getMinutes());
}
aBtn2[2].οnclick=function ()
{
alert(oDate1.getSeconds());
}
//例2:假设当前时间------------------------------------------------------
var oDiv2a=oDiv2.getElementsByTagName('div')[0];
var aImg1=oDiv2a.getElementsByTagName('img');
var str1='105123';
for(var i=0;i<aImg1.length;i++)
{
aImg1[i].src='js001/images/'+str1[i]+'.png';
}
//例3:获取系统时间 静态 -------------------------------------------------
var oDiv2b=oDiv2.getElementsByTagName('div')[1];
var aImg2=oDiv2b.getElementsByTagName('img');
var oDate2=new Date();
var str2=toDou(oDate2.getHours())+toDou(oDate2.getMinutes())+toDou(oDate2.getSeconds());
for(var i=0;i<aImg2.length;i++)
{
aImg2[i].src='js001/images/'+str2.charAt(i)+'.png';
}
//例4:获取系统时间 动态 -------------------------------------------------
var oDiv2c=oDiv2.getElementsByTagName('div')[2];
var aImg3=oDiv2c.getElementsByTagName('img');
function tick (){
var oDate3=new Date ();
var str3=toDou(oDate3.getFullYear())+toDou(oDate3.getMonth()+1)+toDou(oDate3.getDate())+toDou(oDate3.getHours())+toDou(oDate3.getMinutes())+toDou(oDate3.getSeconds());
for(var i=0;i<aImg3.length;i++)
{
aImg3[i].src='js001/images/'+str3.charAt(i)+'.png';
}
}
setInterval(tick, 1000);
tick ()
var oDiv3=document.getElementById('div3');
var aDiv3A=oDiv3.getElementsByTagName('div')[0];
var aDiv3Aa=aDiv3A.getElementsByTagName('div')[0];
var aDiv3Ab=aDiv3A.getElementsByTagName('div')[1];
var time2=null;
aDiv3Aa.οnmοuseοver=aDiv3Ab.οnmοuseοver=function ()
{
clearTimeout(time2);
aDiv3Ab.style.display='inline';
}
aDiv3Ab.οnmοuseοut=aDiv3Aa.οnmοuseοut=function ()
{
time2=setTimeout(function ()
{
aDiv3Ab.style.display='none';
}, 500)
}
}
*/
</script>-->
</head>
<BODY>
<div id='wx_pic'><img src='../../pic300.png' alt="微信标志" /></div>
<pre>
<h1><a href="../../index.html">JAVAscript练习</a></h1>
<a target="_blank" href="//shang.qq.com/wpa/qunwpa?idkey=442978dc8e0012bf609ee519dd7e2db21eb7b12318df66c0342edae75550997d" class="right"><img border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="东山群-电脑网络技术" title="东山群-电脑网络技术"></a>
</pre>
<div id="div1" class="box box-re form-inline">
1、定时器<br><br>
例1:setInterval 定时型<br>
<code>setInterval(show, 1000)</code> <button class="btn btn-info">开始弹出</button> 无终止执行 每隔一秒执行1次函数<br><br>
例2:setTimeout 延时型<br>
<code>setTimeout(show, 2000)</code> <button class="btn btn-info">开始弹出</button> 两秒后执行一次弹出就结束<br><br>
例3:开启和关闭<br>
<button class="btn btn-info">开启</button> <button class="btn btn-info">关闭</button> <code>clearInterval(函数名)</code><br><br>
<span class="text-warning">clearTimeout(函数名)是关闭setTimeout延时器的方法。</span>
</div>
<div id="div2" class="box box-re">
2、日期对象 Date<br><br>
获取 <button class="btn btn-info">当前小时</button> <button class="btn btn-info">当前分钟</button> <button class="btn btn-info">当前秒数</button><br><br>
假设当前时间是 <code>var str1='105123';</code> 做一个6位数字图片的循环,第i个图片的src就是第i个png。
<div class="box box-re">
<img src="js001/images/0.png" />
<img src="js001/images/0.png" />
:
<img src="js001/images/0.png" />
<img src="js001/images/0.png" />
:
<img src="js001/images/0.png" />
<img src="js001/images/0.png" />
</div>
</div>
<div id="div3" class="box box-re">
3、延时提示框<br><br>
<div><span class="jingguo">鼠标经过触发二级</span><span class="chuxian">鼠标离开关闭二级</span></div>
</div>
<div id="Record" class="box box-re red">
记录<br>
<p><b>定时器setInterval:</b><code>setInterval(show, 1000)</code> 无终止执行 每隔一秒执行1次函数。对应<code>clearInterval(变量名)</code>关闭定时器。</p>
<p><b>定时器setTimeout:</b><code>setTimeout(show, 2000)</code> 两秒后执行一次函数就结束。对应<code>clearTimeout(变量名)</code>关闭定时器。</p>
<p><b>关闭定时器:</b>需要指定出需要关闭得是哪个定时器。通过<code>time=null</code> clearInterval(time参数)来指定关闭哪个定时器。</p>
<p><b>Date对象:</b>首先需要创建个新日期对象出来,例如<code>var oDate=new Date()</code> 获取方法:getFullYear年、getMonth月、getDate日、getDay星期、getHours时、getMinutes分、getSeconds秒。例如获取当前小时<code>oDate.getHours()</code></p>
<p><b>时间补零&字符串连接:</b>例如将6分改成06分。建立函数,做一个判断,如果这个数字小于10,那他就是个单数,就需要给他补一个0返回出去。例如<code>return '0'+n;</code>,否则就是大于等于10的,说明已经是双数,那么就直接返回出去。例如<code>return ''+n;</code>。加''是为了让返回出去的数字类型变成字符串。</p>
<p><b>变量调用匿名函数:</b>任何需要添加函数名的变量,都可以直接把函数内容存进去,即匿名函数。</p>
<p><b>函数第一时间执行:</b>例如有一个函数<code>function show()</code>需要在第一时间执行,就把函数名show()放到onload里。这样就会立刻执行show()。</p>
<p><b>charAt:</b>charAt(0)作用于兼容 获取字符串上某一位的东西。例如<code>var str='abcdefg'</code>,如果想弹出第0位上的东西不可以直接写成<code>alert(str[0])</code>,部分浏览器会不兼容。这个时候就需要用到charAt()。即<code>alert(str.charAt(0))</code></p>
<p><b>延时提示框:</b>当鼠标经过div1显示出div2,当鼠标移出div1隐藏div2(通过用setTimeout延时500毫秒执行隐藏),当鼠标从div1移动到div2的时候div2保持可见状态(通过clearTimeout()执行关闭刚才的延时隐藏,这样就做到了div2保持可见),当鼠标移出div2则隐藏(再次用setTimeout延时500毫秒执行隐藏,同时设置当鼠标经过div1的时候关闭刚才的延时隐藏)。</p>
</div>
</BODY>
</HTML>