1.BOM - 浏览器对象模型
一套操作浏览器功能的API
通过BOM可以操作浏览器窗口,比如:弹出框、控制浏览器跳转、获取分辨率等
2.DOM - 文档对象模型
一套操作页面元素的API
DOM可以把HTML看做是文档树,通过DOM提供的API可以对树上的节点进行操作
3.JavaScript初体验
CSS:行内样式、嵌入样式、外部样式
4.JavaScript的书写位置
- 写在行内
<input type="button" value="按钮" onclick="alert('Hello World')" />
- 写在script标签中
<head> <script> alert('Hello World!'); </script> </head>
- 写在外部js文件中,在页面引入
<script src="main.js"></script>
- 注意点
***引用外部js文件的script标签中不可以写JavaScript代码***
5.变量
1)什么是变量
变量是计算机内存中存储数据的标识符,根据变量名称可以获取到内存中存储的数据。
使用变量可以方便的获取或者修改内存中的数据。
2)如何使用变量
- var声明变量
var age;
- 变量的赋值
var age; age = 18;
- 同时声明多个变量
var age, name, sex; age = 10; name = 'zs';
- 同时声明多个变量并赋值
var age = 10, name = 'zs';
3)变量在内存中的存储
var age = 18;
4)变量的命名规则和规范
- 规则 - 必须遵守的,不遵守会报错
- 由字母、数字、下划线、$符号组成,不能以数字开头
- 不能是关键字和保留字,例如:for、while。
- 区分大小写
- 规范 - 建议遵守的,不遵守不会报错
- 变量名必须有意义
- 遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。例如:userName、userPassword
6.简单数据类型
Number、String、Boolean、Undefined、Null
7.运算符的优先级
优先级从高到底:
1. () 优先级最高
2. 一元运算符 ++ -- !
3. 算数运算符 先* / % 后 + -
4. 关系运算符 > >= < <=
5. 相等运算符 == != === !==
6. 逻辑运算符 先&& 后||
7. 赋值运算符
7.arguments的使用
JavaScript中,arguments对象是比较特别的一个对象,实际上是当前函数的一个内置属性。也就是说所有函数都内置了一个arguments对象,arguments对象中存储了传递的所有的实参。arguments是一个伪数组,因此及可以进行遍历。
function f1() { //arguments----->数组使用------伪数组--- var sum=0; for(var i=0;i<arguments.length;i++){ sum+=arguments[i]; } return sum; } console.log(f1(10,20,30));
8.数组和对象的区别
对象就是包含 属性/值 的集合,数组就是一组 值 的集合
数组具有一个最基本特征:索引,这是对象所没有的,通过 数组名[索引] 可以访问数组元素。
数组表示有序数据的集合,而对象表示无序数据的集合。如果数据的顺序很重要,就用数组,否则就用对象。
9.new关键字
new在执行时会做四件事情:
1)new会在内存中创建一个新的空对象
2)new 会让this指向这个新的对象
3)执行构造函数 目的:给这个新对象加属性和方法
4)new会返回这个新对象
10.this详解
JavaScript中的this指向问题,有时候会让人难以捉摸,随着学习的深入,我们可以逐渐了解
现在我们需要掌握函数内部的this几个特点
1. 函数在定义的时候this是不确定的,只有在调用的时候才可以确定
2. 一般函数直接执行,内部this指向全局window
3. 函数作为一个对象的方法,被该对象所调用,那么this指向的是该对象
4. 构造函数中的this其实是一个隐式对象,类似一个初始化的模型,所有方法和属性都挂载到了这个隐式对象身上,后续通过new关键字来调用,从而实现实例化
11.简单类型和复杂类型的区别
基本类型又叫做值类型,复杂类型又叫做引用类型。
值类型:简单数据类型,基本数据类型,在存储时,变量中存储的是值本身,因此叫做值类型。
引用类型:复杂数据类型,在存储是,变量中存储的仅仅是地址(引用),因此叫做引用数据类型。
12.创建对象的三种方式
1.调用系统的构造函数创建对象
var smallDog=new Object(); smallDog.name="大黄"; smallDog.age=3; smallDog.color="黄色"; smallDog.weight="250"; smallDog.eat=function () { console.log("我要吃大骨头"); }; smallDog.walk=function () { console.log("走一步摇尾巴"); }; smallDog.eat();//方法的调用 smallDog.walk();
2.自定义构造函数创建对象(结合第一种和需求通过工厂模式创建对象)
//自定义构造函数创建对象,我要自己定义一个构造函数,自定义构造函数,创建对象 //函数和构造函数的区别;名字是不是大写(首字母是大写) function Person(name,age) { this.name=name; this.age=age; this.sayHi=function () { console.log("我叫:"+this.name+",年龄是:"+this.age); }; } //自定义构造函数创建对象:先自定义一个构造函数,创建对象 var obj=new Person("小明",10); console.log(obj.name); console.log(obj.age); obj.sayHi(); var obj2=new Person("小红",20); console.log(obj2.name); console.log(obj2.age); obj2.sayHi();
3.字面量的方式创建对象
var obj={}; obj.name="小白"; obj.age=10; obj.sayHi=function () { console.log("我是:"+this.name); }; obj.sayHi(); var obj2={ name:"小明", age:20, sayHi:function () { console.log("我是:"+this.name); }, eat:function () { console.log("吃了"); } }; obj2.sayHi(); obj2.eat();