学习周记 Week5

最新推荐文章于 2021-06-26 23:27:46 发布

Daisy47199390

最新推荐文章于 2021-06-26 23:27:46 发布

阅读量106

点赞数

分类专栏：学习周记

本文链接：https://blog.csdn.net/weixin_47199390/article/details/115353206

版权

学习周记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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 保留了一些关键字为自己所用。
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;

yunxingjieguo

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>

Daisy47199390

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
学习周记 Week5

1.学习目标：掌握JavaScript基本操作2.学习内容：2.1 JavaScript简介JavaScript 是 Web 的编程语言，是 web 开发人员必须学习的 3 门语言中的一门。HTML 定义了网页的内容CSS 描述了网页的布局JavaScript 网页的行为2.2 JavaScript使用方法如需在 HTML 页面中插入 JavaScript，用 < script> 标签。*脚本可被放置在 HTML 页面的 < body> 和 < head&g
复制链接

扫一扫