姜玉琪_20210117-姜玉琪

知识点总结:

1、BOM常用的对象

1、window对象:

​ BOM的核心对象是window,它表示浏览器的一个实例。

​ 注:只要是window的方法和属性,window对象名都可以省略

与对话框有关的方法

与计时有关的方法

修改元素内容的几个方法和属性

例子:

代码:
console.log(elements);
</script>
24
25
26
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>时钟</title>
<style type="text/css">
#clock {
color: green;
font-size: 30px;
}
</style>
</head>
<body>
<h1 id="clock">我是时间</h1>
<input type="button" value="开始" onclick="start()" />
<input type="button" value="暂停" onclick="pause()" />
<script type="text/javascript">
//定义定时器
var timer;
//开始调用
function start() {
//先清除上一个计时器,再开启一个计时器
window.clearInterval(timer);
//1000毫秒调用begin()

2、 location对象

代表浏览器的地址栏对象

location常用的属性

​ href 属性 获取href属性,获得当前地址栏访问的地址

​ 设置href属性,用于页面的跳转,跳转到一个新的页面

3、 history对象

访问浏览器之前已经访问过的页面

2、JavaScript中的几个概念

1、 基本词法

​ 词法定义了 JavaScript 的基本名词规范,包括字符编码、命名规则、标识符、关键字、注释规 则、 运算符和分隔符等。 句法定义了 JavaScript的基本运算逻辑和程序结构,包括短语、句子和代码段的基本规则,如表达 式、语句和程序结构等。

2、 区分大小写

​ JavaScript 严格区分大小写。为了避免输入混乱和语法错误,建议采用小写字符编写代码。在以下特殊 情况下可以使用大写形式:

构造函数的首字母建议大写。构造函数不同于普通函数

​ 如果标识符由多个单词组成,可以考虑使用骆驼命名法——除首个单词外,后面单词的首字母大写

typeOf();
myGirlFriend;

3 、直接量

​ 直接量(Literal)就是具体的值,即能够直接参与运算或显示的值,如字符串、数值、布尔值、正则表 达式、对象直接量、数组直接量、函数直接量等

//空字符串直接量
1 //数值直接量
true //布尔值直接量
/a/g //正则表达式直接量
null //特殊值直接量
{} //空对象直接量
[] //空数组直接量
function(){} //空函数直接量,也就是函数表达式

4 、转义序列

​ 转义序列就是字符的一种表示方式(映射)。由于各种原因,很多字符无法直接在代码中输入或输出, 只能通过转义序列间接表示

Unicode 转义序列方法:\u + 4位十六进制数字。

Latin-1 转义序列方法:\x + 2位十六进制数字。

//对于字符“©” , Unicode 转义为 \u00A9,ASCII 转义为 \xA9
document.write("\xa9"); //Latin-1 显示字符©
document.write("\u00a9"); //Unicode 显示字符©

5 、标识符

​ 标识符(Identifier)就是名称的专业术语。JavaScript 标识符包括变量名、函数名、参数名和属性名 合法的标识符应该注意以下强制规则:

第一个字符必须是字母、下划线(_)或美元符号($)。

除了第一个字符外,其他位置可以使用 Unicode 字符。

一般建议仅使用 ASCII 编码的字母,不建 议使用双字节的字符。

不能与 JavaScript 关键字、保留字重名。

可以使用 Unicode 转义序列。

例如,字符 a 可以使用“\u0061”表示 (不推荐)。

6、 关键字

​ 关键字就是 ECMA-262 规定的 JavaScript 语言内部使用的一组名称(或称为命令)。这些名称具有特 定的用途,用户不能自定义同名的标识符。具体说明如表所示

3、流程控制语句

1、 if 判断

if 语句 在一个指定的条件成立时执行代码。

if...else 语句 在指定的条件成立时执行代码,当条件不成立时执行另外的代码。

if...else if....else 语句 使用这个语句可以选择执行若干块代码中的一个。

2 、循环

for 语句 :循环指定次数

while语句: 当指定的条件为 true 时循环执行代码

do-while语句: 最少执行1次循环

break和continue :break: 跳出整个循环 continue:跳出本次循环

4、 函数

1、一个函数的声明(或者说是函数的定义)

包含: 1. 关键字function

  1. 函数名称 3.
  2. 参数列表,包围在括号中并由逗号分隔
  3. 定义函数的 JavaScript 语句,用大括号 {} 括起来

函数 square 使用了一个参数,叫作 number 。这个函数只有一个语句,它说明该函数将函数的参数 (即 number )自乘后返回。函数的 return 语句确定了函数的返回值。 函数声明后不会立即执行,会在我们需要的时候调用。 原始参数(比如一个具体的数字)被作为值传递给函数;值被传递给函数,如果被调用函数改变了这个 参数的值,这样的改变不会影响到全局或调用函数。

2、Function() 构造函数

通过前边的内容我们学习了函数通过关键字 function 来定义。 函数同样可以通过内置的 JavaScript 函数构造器(Function())定义

5、 调用函数

​ 定义一个函数并不会自动的执行它。定义了函数仅仅是赋予函数以名称并明确函数被调用时该做些什 么。调用函数才会以给定的参数真正执行这些动作。例如,一旦你定义了函数 square 。

6、 嵌套函数和闭包

1、你可以在一个函数里面嵌套另外一个函数。嵌套(内部)函数对其容器(外部)函数是私有的。它自身 也形成了一个闭包。一个闭包是一个可以自己拥有独立的环境与变量的表达式(通常是函数)。

既然嵌套函数是一个闭包,就意味着一个嵌套函数可以”继承“容器函数的参数和变量。换句话说,内部 函数包含外部函数的作用域。

可以总结如下:

内部函数只可以在外部函数中访问。

内部函数形成了一个闭包:它可以访问外部函数的参数和变量,但是外部函数却不能使用它的参数 和变量。

2、闭包

闭包是 JavaScript 中最强大的特性之一。JavaScript 允许函数嵌套,并且内部函数可以访问定义在外部 函数中的所有变量和函数,以及外部函数能访问的所有变量和函数。

但是,外部函数却不能够访问定义在内部函数中的变量和函数。这给内部函数的变量提供了一定的安全 性。

7、js实现图片切换

步骤:

a.创建HTML页面,页面中有一个div标签,div标签内包含一个img标签。

b.body的背景色为黑色;div的类样式为container:设置为居中,加边框,宽度为850px;img的id 为pic,宽度850px;

c.五张图片的名字依次是0~4.jpg,放在项目的img文件夹下,图片一开始的src为第0张图片。

d.编写函数:changePicture(),使用setInterval()函数,每过3秒调用一次。

e.定义全局变量:num=1。

f. 在changePicture()方法中,设置图片的src属性为img/num.jpg。

g. 判断num是否等于4,如果等于4,则num=0;否则num++。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片切换</title>
<style type="text/css">
.container {
/*居中*/
margin: auto;
border: 1px solid black;
width: 850px;

}
img {
width: 850px;
}
</style>
</head>
<body>
<div class="container">
<img src="img/0.jpg" id="pic">
</div>
<script>
//全局变量
var num = 1;
//获取图片对象
var picObj = document.getElementById("pic");
//改变图片的src属性
function changePicture() {
//得到图片的src属性,替换它的值
picObj.src = "img/" + num + ".jpg";
//如果图片到了第4张图片,则重新变成第1张,否则就加1
if (num == 4) {
num = 0;
} else {
num++;
}
}
//每过3秒调用一次
setInterval("changePicture()", 3000);
</script>
</body>
</html>

8、javascript的事件

1 、事件的作用 我们刚才的案例中的script标签在不修改代码的基础上,就必须放在body标签之后 ; 原因是因为必须在 页面加载完成之后,我们才可以获取到图片标签 ; 若想把script标签放在body标签之前,这里可以通过 添加页面加载成功事件来处理。

事件是可以被 javascript 侦测到的行为(类似监听器)。

网页中的每个元素都可以产生某些可以触发 javascript 函数的事件。

例如 : 页面加载成功的之后我们来 触发某个函数,又如我们可以在用户点击某个标签时产生一个单击事件来触发某个函数。

注意:事件通常要与函数配合使用,当事件发生时函数才会执行。

常见的事件:

心得体会:

学习的时候一定要多练习,才能熟练运用!

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1