JavaScript源码笔记（一）【爱创课堂专业前端培训】

一、前端页面三个组成部分
HTML结构 CSS表现 JavaScript行为

二、什么是JS?
由网景（NetScape）公司开发，前身叫做LiveScript;

一门基于(面向)对象、面向客户端浏览器，事件驱动的脚本语言;

轻量级但功能强大的(类)编程语言；

可以用来 制作网页游戏 交互式操作 制作动画 等等

JS之父 布兰登·艾奇

JS与JAVA异同点？ 详见公众号

三、JS三个组成部分
ECMA核心API:JS基本语法、常量变量、运算符、流程语句、函数、对象

BOM:Browser Object Model 浏览器对象模型 浏览器相关API

DOM:Document Object Model 文档对象模型 文档操作的相关API

四、JS位置的书写
Javascript简称js。js代码书写在一对

script标签可以写在页面的任何位置，我们初始学习的时候，习惯放在body标签里。

js本身不能自己在浏览器加载，必须依托html载体来在浏览器中实现。

面试题：JS代码写在body前和body后有什么区别？

1

五、JS语法
一般情况下，从上往下顺序执行;

每一条语句以分号结束；
严格区分大小写
忽略所有的换行与空格

六、JS中注释
// 单行注释

/* 多行注释 */

1 //弹出一个警告框

2 alert(“hello JS”)

3 /*

4 需求：根据用户输入的数字，给出对应季节

5 思路：1，

6 2，

7 3，

8 */

七、JS中数据输出方式
7.1 通过警告框的方式弹出数据
alert(“Hello World!!”) alert(122333) alert(12.34)

提示：字符串使用双引号或者单引号进行包裹

// 通过警告框的方式输出信息
//弹出字符换
alert(“Hello World!!!”);
// 弹出一个数字
alert(122333);
alert(12.34);
//弹出一个布尔值，布尔值只有两种结果：true 和 false
alert(true);

1

7.2 通过浏览器控制台输出数据
console.log(“Hello World!!”); ==> Hello World

console.log(3+3); ==> 6

console.log(4+”6”) ; ==> 46

console.log(“6”-4); ==> 2

7.3 向页面中输出数据
直接向文档中写数据 document.write(“data”);

1

向标签中写入数据 element.innerHTML = “data”

点我向div中写入数据

1

八、常量
常量，也叫字面量，在程序执行过程中不会发生改变的量

常量可以直接输出

九、变量
9.1 变量概述
在程序执行过程中可以发生改变的量；它是一个用来存储数据的容器。

9.2 变量的声明
var 变量名 = 初始化值;

var 是JS中的关键字，用来声明变量

变量名 用户自定义，命名规则见后面

= 赋值运算符：将 = 右边的初始化值赋值给左边的变量

初始化值 可以是一个常量 也可以是一个变量 还可以是一个表达式

9.3 变量的命名规则
由数字、字母、下划线以及美元符号$组成，数字不能开头
不能是js中的关键字和保留字
驼峰式命名：首字母小写，多个单词从第二个单词开始首字母大写 例如：getNumSum
一般长度不会超过18位

判断下面变量的命名是否符合规则，为什么？

HelloWorld $123-num123_{1}23h$! 我爱你 num b23

//使用var关键字来声明一个变量
var a = 10;
console.log(“a:”,a);

var HelloWorld = “JavaScript”;
console.log(“Hello World:”,HelloWorld);

var $123 = true;
console.log("$123:",$123);

// var -num123 = 123;
// console.log("-num123:",-num123);//Uncaught SyntaxError: Unexpected token -

var 我爱你 = “中国”;
console.log(“我爱你，”,我爱你);

var c = 10;
var b = 20;
var sum = b + c + 10;
console.log(“b:”,b,“sum:”,sum);//==> 40

//变量不需要多次声明
b = 40;
console.log(“b:”,b,“sum:”,sum);//==>40

var num1 = 100,
num2 = 200,
sum2 = num1 + num2;
console.log(“num1:”,num1,“num2:”,num2,“sum2:”,sum2); // ==> num1: 100 num2: 200 sum2: 300

1

输出结果：

1 a: 10

2 Hello World: JavaScript

3 $123: true

4 我爱你， 中国

5 b: 20 sum: 40

6 b: 40 sum: 40

7 num1: 100 num2: 200 sum2: 300

9.4 变量的调用
如上代码，直接调用变量名

注意：此处等号 “=” 不是等于的意思，是赋值的意思

9.5 变量的提升
浏览器中存在两种引擎：渲染引擎 和 JS引擎

JS引擎解析JS代码分成两步：

预解析阶段，会将所有变量的声明提升到当前作用域的最顶部，率先执行；

运行阶段，根据顺序依次赋值和运行代码

console.log(num);

1

运行结果：

1 Uncaught ReferenceError: num is not defined 变量没有被声明

console.log(num);
var num = 20;

1

运行结果：undefined 变量被声明，但是没有被定义或叫没有被赋值

//上面执行的过程类似于下面
var num; //预解析阶段，所有的声明提升到当前作用域的最顶部
console.log(num);//undefined
num = 20;//赋值
console.log(num);//20

1

结果：

undefined

20

通过上面告诉我们，变量一定要先定义，再使用，不然获取不到正确值

十、数据类型的分类
10.1 基本数据类型
Number数值类型: 如 10 20 12.34 Infinity(无限大) NaN(Not a Number)不是一个数字

String字符串类型: 由单引号或者双引号进行包裹的文本 例如：”Hello” “23”

Boolean布尔类型：只有两个值 true 和 false

Null 空值，空指针对象

Undefined 未被定义的：变量被声明，但是没有被赋值

ES5中提出的概念，衍生自Null，但是又不同于Null

10.2 引用数据类型
Object

Function

10.3 判断变量的数据类型 typeof 操作符
语法格式

typeof 变量或常量

typeof(变量或常量)

//基本数据类型
//Number数值类型
var num = 10;
console.log(“num =”,num)
//判断变量的数据类型：typeof 变量 || typeof(变量)
console.log(typeof num); //==> number
console.log(typeof(“Hello”));// ==> string

var num2 = 10.23;
console.log(“num2数据类型为：”,typeof num2);

var num3 = num2 / 0;
//var num3 = -num2 / 0;
console.log(“num3:”,num3,",数据类型:",typeof num3);

var num4 = 4/“Hello”;
console.log(“num4:”,num4,",数据类型：",typeof(num4));

console.log(NaN + 12);
console.log(NaN + “13”);
console.log(12 + NaN);
console.log(“12” + NaN);
console.log(“12” - NaN);
console.log(12 - NaN);

console.log(typeof NaN);//>number
console.log(NaN == NaN);//>false

1

结果：

num = 10

number

string

数据类型为： number

Infinity ,数据类型: number

NaN ,数据类型： number

NaN

NaN13

NaN

12NaN

NaN

NaN

number

false

//字符串类型String
var str = “34”;
console.log(“str:”,str,“数据类型：”,typeof str);//==>str: 34 数据类型： string

console.log(typeof “true”);//> string
console.log(typeof “hello123”);//> string

1

//Boolean布尔类型
console.log(true,“数据类型：”,typeof true);
console.log(false,“数据类型：”,typeof false);
console.log(10 === 10);

1

输出结果：

true “数据类型：” “boolean”

false “数据类型：” “boolean”

true

1

var a;
console.log(“a:”,a,“数据类型：”,typeof a);//==>a: undefined 数据类型： undefined

console.log(null == undefined);//true 此处"“判断值是否相同，忽略数据类型
console.log(null === undefined);//false 此处”="判断值和类型是否相同

1

十一、基本数据类型转换
11.1 隐式转换
借助运算符

var a = 10,
b= “20”,
c = “Hello”,
d = true,
e = 30;
//这里，有一个字符串，通过 + 完成字符串拼接，隐式转换
console.log("a+b = ",a+b,“数据类型:”,typeof(a+b));// > a+b = 1020 数据类型: string
console.log(“a+c+d=”,a+c+d,“数据类型：”,typeof(a+c+d)); //> a+c+d= 10Hellotrue 数据类型： string
console.log(“a+c+e=”,a+c+e);//>10Hello30
console.log(“a+e+c=”,a+e+c);//>40Hello
console.log(“c+a+e=”,c+a+e);//==>Hello1030

//当数值 和 布尔进行数学运算时，true 默认转为数值1进行运算 false 默认转为数值 0 进行运算
console.log(“d+e=”,d+e,“数据类型：”,typeof(d+e));//> d+e= 31 数据类型： number
console.log(false + 10);//>10
console.log(false + true,"=",typeof(true+false));//> 1 “===” “number”

//这里，使用 - * 、 %，如果字符串为数字字符串，会自动转换成数值类型进行数学运算
console.log("a-b = ",a-b,“数据类型:”,typeof(a-b));// ==> -a-b = -10 数据类型: number
console.log(“a-c=”,a-c,“数据类型：”,typeof(a-c));// ==> a-c= NaN 数据类型： number
console.log("ac=",ac,“数据类型：”,typeof(ac));// ==> ac= NaN 数据类型： number
console.log(e-d);// ==> 29

1

11.2 显式转换
借助全局的方法：toString() parseInt() parseFloat()

var a = 10,
b = 10.23,
c = “20”,
d = “Hello”,
e = true,
f = false;

console.log(“a:”,a,",数据类型:",typeof a,"==b:",b,",数据类型:",typeof b,"===c",c,",数据类型:",typeof c,"===d",d,",数据类型:",typeof d,"===e",e,",数据类型:",typeof e,"===f",f,",数据类型:",typeof f)

//通过toString()方法将其他数据类型转换成字符串类型
var g = a.toString();
console.log(“g:”,g,typeof g);//=>g: 10 string
var h = e.toString();
console.log(“h:”,h,typeof h);//=>h: true string

//通过parseInt() parseFloat()将其他数据类型转换成整数或者浮点数类型
var i = parseInt©;
console.log(“i:”,i,typeof i);//>i: 20 number
var j = parseInt(d);
console.log(“j”,j,typeof j);//> j NaN number
var k = parseFloat(e);
console.log(“k”,k,typeof k);//==> k NaN number

1

使用包装类： String() Number() Boolean()

//通过包装类来进行转换
//String() 将其他数据类型转换成字符串类型
var l = String(b);
console.log(“l”,l,typeof l);//> l 10.23 string
var m = String(f);
console.log(“m”,m,typeof m);//> m false string

//Number() )将其他数据类型转换成数值类型
var n = Number©;
console.log(“n”,n,typeof n);//> n 20 number
var o = Number(d);
console.log(“o”,o,typeof o);//> o NaN number
var p = Number(f);
console.log(“p”,p,typeof p);//==> p 0 number

//Boolean() 将其他数据类型转换成布尔类型
var q = Boolean(b);
console.log(“q”,q,typeof q);//>q true boolean
var r = Boolean©;
console.log(“r”,r,typeof r);//>r true boolean
var s = Boolean(d);
console.log(“s”,s,typeof s);//==>s true boolean

var t = Boolean(null);
console.log(“null:”,t,typeof t);// >null: false boolean
var u = Boolean(undefined);
console.log(“undefined:”,u,typeof u);//>undefined: false boolean

var v = Boolean(0);
console.log(“0:”,v,typeof v);//>0: false boolean
var w = Boolean(1);
console.log(“1:”,w,typeof w);//>1: true boolean

1

1

十二、算术运算符
用来执行数学运算

• • • / %(取模，取余) ++(自增) --(自减)