从本篇开始主要讲JavaScript的相关内容;
1、浏览器执行js
浏览器分为渲染引擎和js引擎两部分:
js引擎会逐行解释每一行代码将其转换为机器语言再由计算机去执行;
2、js的组成
1、ECMAScript规定了JS的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准,详细可参照MDN手册;
2、文档对象模型(DocumentObject Model,简称DOM),是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等);
3、浏览器对象模型(Browser Object Model,简称BOM) 是指浏览器对象模型,它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等;
3、js三种书写方式
与CSS一样,js也有三种书写位置:
3.1行内式
<input type="button" value="点我试试" onclick="alert('Hello World')" />
特点如下:
- 可以将单行或少量 JS 代码写在HTML标签的事件属性中(以 on 开头的属性),如:onclick
- 注意单双引号的使用:在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号
- 可读性差, 在html中编写JS大量代码时,不方便阅读;
- 引号易错,引号多层嵌套匹配时,非常容易弄混;
- 特殊情况下使用
3.2内嵌式
在head中写script标签对即可(最常用):
<script>
这里是内容部分
</script>
3.3外部文件式
在外面新建一个.js文件后再将其引入到html中:
<script src="my.js"></script>
- 利于HTML页面代码结构化,把大段 JS代码独立到 HTML 页面之外,既美观,也方便文件级别的复用
- 引用外部 JS文件的 script 标签中间不可以写代码
- 适合于JS 代码量比较大的情况
4、js变量相关
4.1变量声明与赋值
通过var来声明变量,并可在声明的同时进行赋值,如:
var age = 23;
通常,我们把声明一个变量并赋值称为变量的初始化
4.2变量语法扩展
- 更新变量:一个变量被重新复赋值后,它原有的值就会被覆盖,变量值将以最后一次赋的值为准;
- 同时声明多个变量:同时声明多个变量时,只需要写一个 var, 多个变量名之间使用英文逗号隔开,如:
var age = 10, name = 'zs', sex = 2;
- 声明变量特殊情况:
5、js数据类型
不同于其他语言在定义时要写明数据类型,js不需要写明数据类型,而是在程序运行过程中,类型会被自动确定(代码运行时变量的数据类型是由 JS引擎 根据 = 右边变量值的数据类型来判断 的,运行完毕之后, 变量就确定了数据类型);
堆和栈的区别:
1、栈(操作系统):由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈;简单数据类型存放到栈里面
2、堆(操作系统):存储复杂类型(对象),一般由程序员分配释放,若程序员不释放,由垃圾回收机制回收;栈中存放的是其地址,其内容存在堆中;
但要注意复杂数据类型在在函数中传参的使用:
函数的形参也可以看做是一个变量,当我们把引用类型变量传给形参时,其实是把变量在栈空间里保存的堆地址复制给了形参,形参和实参其实保存的是同一个堆地址,所以操作的是同一个对象,会引起外部的值变化,如下:
function Person(name) {
this.name = name;
}
function f1(x) { // x = p
console.log(x.name); // 2. 这个输出什么 ?
x.name = "张学友";
console.log(x.name); // 3. 这个输出什么 ?
}
var p = new Person("刘德华");
console.log(p.name); // 1. 这个输出什么 ?
f1(p);
console.log(p.name); // 4. 这个输出什么 ?
最后输出:
5.1数据类型分类
其主要分为简单数据类型与复杂数据类型(后面文章再介绍)两种:
简单数据类型:存储时变量中存储的是值的本身;
复杂数据类型:存储时变量中存储的只是地址,包括:通过 new 关键字创建的对象(系统对象、自定义对象),如 Object、Array、Date等;
5.1.1简单数据类型
5.1.1.1数字型
1、数值的最大值与最小值:
- 最大值:Number.MAX_VALUE,这个值为: 1.7976931348623157e+308
- 最小值:Number.MIN_VALUE,这个值为:5e-32
2、数字型的三个特殊值:
- Infinity ,代表无穷大,大于任何数值
- -Infinity ,代表无穷小,小于任何数值
- NaN ,Not a number,代表一个非数值
3、isNaN的使用:用来判断变量是否是一个非数字类型的变量,若非数字返回true,是数字返回false;
5.1.1.2字符串类型
string类型可以使用单引号或者双引号括起来;
1、字符串引号嵌套:可以外单内双、内单外双
var strMsg = '我是"程序猿”来的'; // 可以用''包含""
var strMsg2 = "我是'程序猿'来的"; // 也可以用"" 包含''
2、字符串转义字符,常见的如下:
3、通过变量名.length可以获取字符串长度
4、字符串拼接
有其他方法,这里只介绍+方法:
- 多个字符串之间可以使用 + 进行拼接,其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串
- 拼接前会把与字符串相加的任何类型转成字符串,再拼接成一个新的字符串
//1.1 字符串 "相加"
alert('hello' + ' ' + 'world'); // hello world
//1.2 数值字符串 "相加"
alert('100' + '100'); // 100100
//1.3 数值字符串 + 数值
alert('11' + 12); // 1112
或者:
var age = 23
console.log('我今年' + age + '岁啦'); // 我今年23岁啦
5、字符串的不可变性
指的是里面的值不可变,虽然看上去可以改变内容,但其实是地址变了,内存中新开辟了一个内存空间。
当重新给字符串变量赋值的时候,变量之前保存的字符串不会被修改,依然在内存中重新给字符串赋值,会重新在内存中开辟空间,这个特点就是字符串的不可变。
由于字符串的不可变,在大量拼接字符串的时候会有效率问题
6、根据字符返回所在位置(与数组中的一致)
7、根据位置返回字符串
8、字符串操作
此外,还有replace方法:
将字符串中的一部分替换为其他字符串
字符串.replace(被替换的字符串, 要替换为的字符串);
split方法:
split()方法用于切分字符串,它可以将字符串切分为数组。在切分完毕之后,返回的是一个新数组
字符串.split("分割字符")
5.1.1.3布尔类型
知道布尔型和数字型相加的时候, true 的值为 1 ,false 的值为 0;
5.1.1.4Undefined和 Null
一个声明但不赋值的变量会是undefined,注意其与其他类型的运算结果:
var variable;
console.log(variable); // undefined
console.log('你好' + variable); // 你好undefined
console.log(11 + variable); // NaN
console.log(true + variable); // NaN
一个声明后赋值为null的变量表名其中内容为空(一般在对象中用):
5.1.1.5typeof查看数据类型
typeof 变量名
5.1.1.6数据类型间的转换
1、转换为字符串
- toString() 和 String() 使用方式不一样;
- 三种转换方式,更多第三种加号拼接字符串转换方式, 这一种方式也称之为隐式转换;
2、转换为数字
- 注意 parseInt 和 parseFloat 单词的大小写,这2个是重点
- 隐式转换是我们在进行算数运算的时候,JS 自动转换了数据类型
3、转换为布尔型
- 代表空、否定的值会被转换为 false ,如 ‘’、0、NaN、null、undefined
- 其余值都会被转换为 true
6、一些扩展
js是解释型语言,与之相对应的是编译型语言,如java
- 翻译器翻译的方式有两种:一个是编译,另外一个是解释。两种方式之间的区别在于翻译的时间点不同;
- 编译器是在代码执行之前进行编译,生成中间代码文件;
- 解释器是在运行时进行及时解释,并立即执行(当编译器以解释方式运行的时候,也称之为解释器);