Web第三课(JavaScript)

1. JavaScript嵌入页面的方式

  1. 行间事件(主要用于事件)

    <input tyle="button" name="" onclick="alert('ok!');">
    
  2. 页面script标签引入

    <script type="text/javascript">
    	alert('ok!')
    </script>
    
  3. 外部引入

    <script type="text/javascript" src="js/index.js"></script>
    
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
        <title>引入JavaScript的三种方式</title>
        <!-- 第一种页面引入JavaScript的方式:外链式,推荐使用 -->
        <script src="./js/Hello.js"></script>
        <!-- 第一种页面引入JavaScript的方式:内嵌式,部分推荐 -->
        <script>alert('Hello JavaScript again!')</script>
    </head>
    <body>
        <!-- 第一种页面引入JavaScript的方式:行间事件,不推荐使用 -->
        <div onclick="alert('Hello JavaScript!')">这是一个div</div>
        <!-- 还可以将js代码写在超链接的href属性中,这样当点击超链接时,会执行js代码 -->
        <a href="javascript:alert('让你点你就点吗?')">请点击我一下</a>
    </body>
    </html>
    
    //Hello.js
    alert('Hello JavaScript again and again!')
    

注意:

script 标签一旦用于引入了外部文件,就不能再编写内部代码了,即使编写了,浏览器也会忽略
如果有需要,可以再创建一个新的script标签

2. JavaScript三条输出语句

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <!-- <title>JavaScript基本语法</title> -->
    <title>JavaScript的三个输出语句</title>
    <script>
        // 向body中输出内容
        document.write("我向body中输入内容~");
        // 向控制台输出内容
        console.log("我向控制台输出内容~");
        // 让浏览器弹出一个警告窗口
        alert("我让浏览器弹出一个警告窗口~");
    </script>
</head>

<body>

</body>

</html>

3. typeof检查变量类型

typeof varName
检查字符串返回string,检查数值返回number

4. 关于number的特殊字面值

Number.MAX_VALUE表示JS中的最大数字,超过它的,JS无法处理
Number.MIN_VALUE 表示最小正值
Infinity/-Infinity

  • 如果表示的数字超过了最大值,则会返回一个 Infinity 表示正无穷
  • 注意:Infinity/-Infinity 也是一个字面值,使用typeof检查其类型是会发现返回的也是number

NaN 也是一个number类型的字面值,表示Not a Number

5. 数值运算

在JS中的整数运算基本可以保证精确,但是如果进行浮点运算,可能得到一个不精确的结果
eg: 0.1 + 0.2 = 0.30000000000000004
因此千万不要使用JS进行对精确度要求比较高的运算。

6. 类型转换

varName.toString()
String(varName)
Number(varName)
parseInt(varName)
parseFloat(varName)
Boolean(varName)
注:如果对非String使用parseInt()和parseFloat(),它会现将其转换为String,然后再操作。

7. 其它进制的数字

在js中如果要表示16进制的数字,需要以0x开头
如果需要表示8进制的数字,则需要以0开头
如果要表示2进制的数字,则需要以0b开头,但是不是所有的浏览器都支持

var a = 0x10;
var b = 010;
var c = 0b1;

像070这种字符串,有些浏览器会当成8进制解析,有些会当做10进制解析,因此在使用parseInt()解析时,传递第二个参数,用来指定数字的进制。

var a = parseInt('070', 10);

8. 运算符

8.1 typeof运算符

typeof也是一个运算符,它会将该值的类型以字符串的形式返回。
算术运算符

8.2 二元运算符

+ - * / %(二元运算符)

  1. 当对任何非Number类型的值进行运算时,会将这些值转换为Number,然后再进行运算
  2. 任何数和 NaN 进行运算,得到的结果都是 NaN
  3. 如果对两个字符串进行 + 操作,得到的结果是两个字符串进行拼接。
  4. 任何值和字符串进行 + 运算,都会现将其转化成字符串然后进行拼接。

8.3 一元运算符

+(正号)、-(负号)一元运算符
对于非number值进行正负操作,会先将其他数据类型转换成number再进行操作。
varName++、++varName、varName--、--varName自增自减运算符。

8.4 逻辑运算符

! && || 逻辑运算符非与或
可以对任意一个非布尔值进行两次连续的取反操作,来将其转换为布尔值:!!varName

8.4.1 非布尔值的与或运算

对非布尔值进行与或运算时,会先将其转换为布尔值,然后再进行运算,并且返回原值。
与运算:如果第1个值为true,则必定返回第2个值,如果第1个值为false,则必定返回第1个值。
或运算:如果第一个值为true,则直接返回第1个值,如果第1个值为false,则直接返回第2个值。

8.5 赋值运算符

=、+=、-=、*=、/=、%=

8.6 关系运算符

>、>=、<、<=、

8.6.1 非数值的关系运算符

对于非数值与数值进行比较时,会先将其转换为数字,再进行比较。
任何数值和NaN作比较,结果都是false
两个字符串进行比较时,会依次比较两个字符串中字符的unicode编码,比较中文字符串时没有意义。
如果是比较两个字符串型的数字时,可能会出现不可预期的问题,因此按照需要进行转义再进行比较。

9. 通过编码使用unicode字符

  1. 在字符串中使用\u16进制UNICODE编码可以输出字符。
  2. 在网页中使用unicode编码:&#10进制unicode编码

10. 条件运算符(三目运算符)

条件表达式?语句1:语句2;
条件运算符在执行时,首先对条件表达式进行求值,如果结果为true,则执行语句1,并返回执行结果,否则执行语句2,然后返回执行结果。

11. 逗号运算符

使用逗号运算符可以分割多个语句,一般在声明多个变量的时候使用。

12. 运算符的优先级

优先级可以自行百度/google,优先级越高的越优先计算,如果优先级一样,则从左往右计算,是在拿不定,就用小括号,小括号的优先级第二高,仅次于 new 操作符和 [] 操作符。

13. 结构语句

JavaScript中提供了if、switch-case、for、for-in、while、do-while等结构语句,和C语言语法基本一致,不多做阐述,下面有个链接可供参考。
JavaScript If…Else 语句
包括switch-case、for、for-in、while、do-while等也都可以在左侧导航栏中找到。

JavaScript for/in 语句遍历对象的属性:

var person = {fname:"Bill", lname:"Gates", age:62}; 

var text = "";
var x;
for (x in person) {
    text += person[x];
}

14. 对象

14.1 内建对象

Math String Nmber Boolean Funtion Object…

14.2 宿主对象

由JS的运行环境提供的对象,目前来讲主要指浏览器提供的对象。比如BOM、DOM

14.3 自定义对象

由开发人员自己创建的对象。
创建对象:

/*
	使用new关键字调用的函数,是构造函数(constructor)
	构造函数是专门用来创建对象的函数。
	使用typeof检查一个对象时,会返回object
*/
var obj = new Object();
console.log(typeof obj);
/*
	向对象中添加属性
*/
obj.name = '孙悟空';
obj.gender = 'male';
obj.age = 18;
/*
	读取对象中的属性:
		objName.attrName
	如果读取一个对象中没有的属性,不会报错,而会返回 undefined。
	修改对象中的属性:
		objName.attrName = newValue;
	删除对象中的某个属性
		delete objName.attrName;
*/

15. 属性名和属性值

  对象的属性名不强制要求遵守标识符的规范,什么乱七八糟的名字都可以使用。但是使用时,还是尽量按照标识符的规范去做。
如果要使用特殊的属性名,不能采用 “.” 的方式来操作,需要使用另一种方式: obj["attrName"] = value;

js对象的属性值可以是任何数据类型。

16. in运算符

通过 in 运算符,可以检查一个对象中是否含有指定的属性,如果有则返回 true,否则返回 false
eg:attrName in objName

  使用in检查对象中是否含有某个属性时,如果对象中没有但是原型中有,也会返回true

17. 基本和引用数据类型

基本数据类型:String Number Boolean Null Undefined
引用数据类型:Object
当比较两个基本数据类型时,比较的是变量的值,比较两个对象时,比较的是内存地址。因此两个对象即使数据一模一样,进行 == 操作也会返回 false

18. 使用字面量来创建一个对象

var obj = {};
obj.name = '孙悟空';

使用字面量来创建时,可以直接指定对象中的属性。

/*
	对象字面量的属性名可以加引号也可以不加,建议不加,如果要使用一些特殊字符,则必须加引号。
*/
var obj = {
	name:'猪八戒',
	sex:'male',
	age:18
};

19. 函数

函数也是一个对象。
构造创建函数对象的语法:

// 可以将要封装的代码以字符串的形式传递给构造函数
var fun = new Function("console.log('Hello 这是我的第一个函数');");
// 调用语法
func();

使用函数声明来创建函数:

// 基本结构
function func2(){
	console.log('这是我的第二个函数');
}

使用函数表达式来创建一个函数(匿名函数方式)

var func3 = function(){
	console.log('这是我的第三个函数,我是匿名函数中的代码...');
};

可以在函数内部再定义一个函数。
funcx()() 这种用法说明在funcx内部返回了一个函数。

19.1 函数的参数

/*
	在调用函数时,解析器不会检查实参类型
	也不会检查实参的数量,多余的实参会被丢弃
		如果实参的数量少于形参的数量,则没有对应实参的形参将是undefined	
*/
function sum(a, b){
	console.log(a + b);
}
sum(10, 20);

19.2 函数的返回值

/*
	如果return语句后不跟任何值,就相当于返回一个 undefined。
	如果函数中不写return,也会返回一个undefined。
*/
function sum(a, b, c) {
	return a + b + c;
}

19.3 立即执行函数

(function(var1, var2){
	xxxxx;
})(var3, var4);

20. 作用域

20.1 全局作用域

直接编写在script标签中的JS代码,都在全局作用域

  • 全局所用于在页面打开时创建,页面关闭时销毁
  • 全局作用域中有一个全局对象window,表示浏览器的窗口,它由浏览器创建我们可以直接使用。
  • 在全局作用域中,创建的变量都会作为window的属性保存。
  • 全局作用域中的函数都会作为window的方法保存。

20.2 变量的声明提前

  使用var关键字声明的变量会在所有的代码执行之前被声明(但是不会被赋值),但是如果在声明变量之前不使用var关键字,则变量不会被声明提前。
  使用函数声明形式创建的函数function funcName(){} 会在所有的代码执行之前就被创建,因此可以在声明之前就使用。使用函数表达式创建的函数不会被提前创建。
  全局所用于中的变量都是全局变量,在页面的任意位置都可以访问到。

20.3 函数作用域

  在函数中操作一个变量时,它会先在自身作用域中寻找,如果找到直接使用,如果找不到则依次向上一级作用域中寻找,如果找到全局作用域中还是没找到,则会直接报错。
  函数作用域也有声明提前的特性,使用var关键字声明的变量,会在函数中所有的代码执行之前被声明,函数声明也会在函数中所有的代码执行之前执行。

在函数中不使用var生命的变量都会成为全局变量。
定义形参就相当于在函数作用域中声明了变量。

21. this

  解析器每次调用函数时,都会向函数内部传递进一个隐含的参数,这个隐含的参数就是this。
  this指向一个对象,这个对象我们称为函数执行的上下文对象,根据函数的调用方式的不同,this会指向不同的对象。

22. 使用工厂的方法创建对象

function createObj(name, age) {
	var obj = new Object();
	obj.name='name';
	obj.age = age;
	return obj;
}

23. 构造函数创建对象

//构造函数和普通函数的区别是:
//	普通函数可以直接调用,
//	而构造函数使用 new 关键字来调用,并且建议该函数首字母大写(建议,非必须);
/*
	构造函数的执行流程:
		1. 立刻创建一个新的对象
		2. 将新创建的对象设为函数中的this
		3. 逐行执行函数中的代码
		4. 将新创建的对象作为函数返回值返回
	使用同一个构造函数创建的对象是一个类,因此可以称一个构造函数是一个类。  
*/
function Person(name, age) {
	this.name = name;
	this.age = age;
}

23.1 使用instanceof检查实例和对象的关系

// 如果object由constructor创建,则返回true,否则返回false
object instanceof constructor
// 所有的对象都是Object的后代,所以任何对象和Object做instanceof检查时都会返回true。
object instanceof Object

23.2 原型对象

将方法定义在全局作用域,会污染全局作用域的命名空间,而且定义在全局作用域中也很不安全。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <title>原型</title>
</head>

<body>
    <script>
        /*
            我们所创建的每一个函数,解析器都会向函数中添加一个属性prototyle,这个属性对应着一个对象,这个对象就是我们所谓的原型对象。
            如果函数作为普通函数调用时,prototype没有任何作用,当函数通过构造函数调用时,我们可以通过 __proto__ 来访问该属性。
            原型对象就相当于一个公共区域,所有同一个类的实例都可以访问到这个原型对象
            我们可以将对象中共有的内容,统一设置到原型对象中

            当我们访问对象的属性或方法时,它会先在对象自身中寻找,如果有则直接使用、
                如果没有,则去原型对象中寻找,如果找到则直接使用
                如果没有,则去原型的原型中寻找,知道找到Object对象的原型
                Object对象的原型没有原型,如果在Object中依然没有找到,则返回undefined
        */
        function MyClass() {
            
        }
        // 向MyClass的原型对象中添加属性a
        MyClass.prototype.a = 10;
        // 向MyClass的原型中添加一个方法
        MyClass.prototype.sayHello = function() {
            alert("Hello");
        };
        var mc = new MyClass();
        var mc2 = new MyClass();
        mc.a = "我是mc中的a";
        console.log(mc.a);
        console.log(mc2.a);
        mc.sayHello();

    </script>
</body>

</html>

23.3 再谈属性检查

通过 in 运算符,可以检查一个对象中是否含有指定的属性,如果有则返回 true,否则返回 false
eg:attrName in objName

  使用in检查对象中是否含有某个属性时,如果对象中没有但是原型中有,也会返回true

可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性,只有当对象自身中含有该属性时,才会返回true;

console.log(objName.hasOwnProperty("attrName"));

此函数是原型的原型的方法

24. 垃圾回收机制

不再使用的对象设为null,即可告诉浏览器,回收该内存。

25. 数组

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <title>Array</title>
</head>
<body>
    <script type="text/javascript">
        var arr = new Array();
        console.log(typeof arr);
        arr[0] = 10;
        arr[1] = 33;
        console.log(arr);
        // 如果读取不存在的索引,不会报错,而是返回undefined
        console.log(arr[3]);
        // 可以使用arr.length属性来获取数组的长度
        console.log(arr.length)
        // 对于非连续的数组,使用length会获取到数组的最大索引值+1,尽量不要使用非连续的数组
        arr[100] = 100; //arr.length == 101
        // 可以修改length,如果修改的length大于原长度,则多出的部分会空出来
        arr.length = 1000;
        // 如果修改的length小于原长度,则多出的元素会被删除。
        arr.length = 2;

    </script>
</body>
</html>

还可以使用字面量来创建数组:var arr = [];
使用字面量创建数组时,可以再创建时就指定数组中的元素:var arr = [0, 1, 2, 3];
var arr = new Array(0, 1, 2, 3);

25.1 Array 和python中的list一样,可以存放任何数据类型

25.2 forEach 遍历数组

// 对于数组中的每一个元素都执行funcName函数。
arr.forEach(funcName);
// forEach遍历时,每次都会给其函数参数传递三个值,分别是当前遍历到的元素、元素的索引、整个数组
// 它们的顺序不能变
arr.forEach(function(element, index, arr){
	console.log(element);
});

Array.prototype.reduce()方法和它类似

25.3 Array.prototype.slice()

The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array. The original array will not be modified.
截取指定范围的元素然后返回一个新的数组

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]
/*
output:
> Array ["camel", "duck", "elephant"]
> Array ["camel", "duck"]
> Array ["bison", "camel", "duck", "elephant"]
*/

如果传递一个负值,表示从后往前数,如果传递一个超出范围的值,则截取实际范围的值,个中深意自行领会,描述太耗字数。

25.4 Array.prototype.splice()

将指定元素从原数组中删除,并将被删除的元素作为返回值返回
参数:

  • 第1个参数表示开始索引的位置
  • 第2个参数表示删除的数量
  • 第3个及以后:可以传递一些新的元素,这些元素将会自动插入到开始位置索引前面。
const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]
/*
output:
> Array ["Jan", "Feb", "March", "April", "June"]
> Array ["Jan", "Feb", "March", "April", "May"]
*/

25.5 Array.prototype.sort()

可以对数组中的元素进行排序,会影响到原数组,默认会按照Unicode编码进行排序。
即使对于纯数字的数组,使用sort排序时,也会按照Unicode来进行排序,所以对数字进行排序时,可能会得到错误的结果。
所以我们可以自己指定排序的规则,在sort中添加一个回调函数,来指定排序规则。

// 使用哪个元素来调用不确定,但是a一定在b的前边
// 浏览器会根据函数的返回值来决定元素的顺序
// 如果返回一个大于0的值, 则元素会交换位置
// 如果返回一个小于0的值,则元素位置不变
// 如果返回一个0,则认为两个元素相等,也不交换位置
arr.sort(function(a, b) {
	// 升序排列
	return a - b;
	// 降序排列
	// return b - a;
});

26. 函数对象的方法

function fun(a, b) {
    alert('我是func函数!');
}
var obj = {}
fun.call(obj, 2, 3);
fun.apply(obj, [2, 3]);
fun(2, 3);

call() 和 apply() 都是函数对象的方法,需要通过函数对象来调用,当对函数对象调用call()方法和apply()方法时,都会调用函数执行。
在调用call() 和 apply() 时可以将一个对象指定为第一个参数,此时这个对象将会成为函数执行时的this。
call() 方法可以将实参在对象之后依次传递。
apply() 方法需要将实参封装在一个数组中统一传递。

27. arguments

在调用函数时,浏览器每次都会传递进两个隐含的参数

  1. 函数的上下文对象——this
  2. 封装实参的对象——arguments
    • arguments是一个类数组对象,它可以通过索引来操作数据也可以获取长度。
    • 在调用函数时,我们所传递的实参都会封装到arguments中。
    • arguments.length可以用来获取实参的长度。
    • 即使不定义形参,也可以通过arguments来使用实参,但是不方便。
    • arguments有一个属性叫作callee,它对应一个函数对象,就是当前执行的函数对象。

28. Date对象

// 如果直接使用构造函数创建一个Date对象,则会封装当前代码执行的时间
var d = new Date();
console.log(d);
// 创建一个指定的时间对象
// 日期的格式:月/日/年 时:分:秒
var d2 = new Date("7/27/2020 23:53:00");

29. Math

Math 和其它对象不同,它不是一个构造函数,它属于一个工具类,不用创建对象,它里面封装了数学运算相关的属性和方法。使用方法很简单,自行google或者baidu。

30. 包装类

在JS中为我们提供了三个包装类,通过这三个包装类可以将基本数据类型的数据转换为对象。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值