目录
一种通过解释器运行的脚本语言，主要在客户端（浏览器）上运行
网页开发(更复杂的特效和用户交互)
网页游戏开发
服务器开发(node.js)
桌面程序开发(Electron, VSCode 就是这么来的)
手机 app 开发
HTML: 网页的结构(骨)
CSS: 网页的表现(皮)
JavaScript: 网页的行为(魂)
代码保存在硬盘上，再通过文件浏览器把.html文件加载在内存中，解析成进制后被CPU加载并执行
硬盘——>内存——>CPU：这一系列操作都由浏览器执行
浏览器：渲染引擎+js引擎
ECMAScript( ES): JavaScript 语法，为JS引擎的标准
DOM: 页面文档对象模型, 对页面中的元素进行操作
BOM: 浏览器对象模型, 对浏览器窗口进行操作
最基础格式，嵌入到 HTML 的 script 标签中.
直接嵌入到 html 元素内部
写到 script 标签中
写到单独的.js文件中
alert("hehe");
注意：这种情况下 script 标签中间不能写代码. 必须空着:
1.单行注释
//
2.多行注释
/* */
// 弹出一个输入框
prompt("请输入您的姓名:");
// 弹出一个输出框
alert("hello");
//控制台打印一个日志(供程序员看)
console.log("这是一条日志");
var name = 'zhangsan';
var age = 20;
var name = prompt("请输入姓名:");
var age = prompt("请输入年龄:");
var score = prompt("请输入分数");
alert("您的姓名是: " + name + "\n" + "您的年龄是: " + age + "\n" + "您的分数是: " +
score + "\n");
1) JS 的变量类型是程序运行过程中才确定的(运行到 = 语句才会确定类型)
2) 随着程序运行, 变量的类型可能会发生改变.
var a = 10; // 数字
a = "hehe"; // 字符串
number: 数字. 不区分整数和小数.
boolean: true 真, false 假.
string: 字符串类型.
undefined: 只有唯一的值 undefined. 表示未定义的值.
null: 只有唯一的值 null. 表示空值.
①JS 中不区分整数和浮点数
②二进制数字用八/十六进制表示
var a = 07; // 八进制整数, 以 0 开头
var b = 0xa; // 十六进制整数, 以 0x 开头
var c = 0b10; // 二进制整数, 以 0b 开头
③特殊的数字值
Infinity: 无穷大, 大于任何数字. 表示数字已经超过了 JS 能表示的范围.
-Infinity: 负无穷大, 小于任何数字. 表示数字已经超过了 JS 能表示的范围.
NaN: 表示当前的结果不是一个数字.
var max = Number.MAX_VALUE;
// 得到 Infinity
console.log(max * 2);
// 得到 -Infinity
console.log(-max * 2);
// 得到 NaN
console.log('hehe' - 10);
注意:
1. 负无穷大 和 无穷小 不是一回事. 无穷小指无限趋近与 0, 值为 1 / Infinity
2. 'hehe' + 10 得到的不是 NaN, 而是 'hehe10', 会把数字隐式转成字符串, 再进行字符串拼接.
3. 可以使用 isNaN 函数判定是不是一个非数字
当字符串内含引号如何表示？
1.交替搭配单双引号表示
var msg = "My name is 'zhangsan'";
var msg = 'My name is "zhangsan"';2.使用转义字符\
var msg = "My name is \"zhangsan\"";
使用.length方法求长度
直接使用+拼接字符串
0、1
未被初始化过
var a;
console.log(a)//加字符串
结果为字符串拼接 undefined10
//加数字
结果为NaA
var b = null;
console.log(b + 10); // 10
console.log(b + "10"); // null10
（1）.算术运算符
+
-
*
/
%
（2）.赋值运算符 & 复合赋值运算符
=
+=
-=
*=
/=
%=
（3）.自增自减运算符
++: 自增1
--: 自减1
（4）.比较运算符
<
>
<=
>=
== 比较相等(会进行隐式类型转换)
!=
=== 比较相等(不会进行隐式类型转换)
!==
（5）.逻辑运算符
用于计算多个 boolean 表达式的值.
&& 与: 一假则假
|| 或: 一真则真
! 非
（6）.位运算
& 按位与
| 按位或
~ 按位取反
^ 按位异或
（7）.移位运算
<< 左移
>> 有符号右移(算术右移)
>>> 无符号右移(逻辑右移)
与java基本一致
if - else
条件？表达1：表达式2
while
switch-case-default
与java基本一致
while
for
continue
break
（1）.使用new关键字
var arr = new Array();
（2）.直接创建（字面量）
var arr = [];
var arr2 = [1, 2, 'haha', false];
var arr = ['小猪佩奇', '小猪乔治', '小羊苏西'];
console.log(arr);
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
arr[2] = '小猫凯迪';
console.log(arr);
console.log(arr[3]); // undefined
console.log(arr[-1]); // undefined
注意: 不要给数组名直接赋值, 此时数组中的所有元素都没了.
var arr = ['小猪佩奇', '小猪乔治', '小羊苏西'];
arr = '小猫凯迪';
1. 通过修改 length 新增
相当于在末尾新增元素. 新增的元素默认值为 undefined
var arr = [9, 5, 2, 7];
arr.length = 6;
console.log(arr);
console.log(arr[4], arr[5]);
2.通过下标新增
var arr = [];
arr[2] = 10;
console.log(arr)
3.使用push进行追加
var arr = [9, 5, 2, 7, 3, 6, 8];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] % 2 != 0) {
newArr.push(arr[i]);
}
}
console.log(newArr);
使用 splice 方法删除元素
var arr = [9, 5, 2, 7];
// 第一个参数表示从下表为 2 的位置开始删除. 第二个参数表示要删除的元素个数是 1 个
arr.splice(2, 1);
console.log(arr);
// 结果
[9, 5, 7]
function 函数名(形参列表) {
函数体
return 返回值;
}
eg:
function hello() {
console.log("hello");
}
// 如果不调用函数, 则没有执行打印语句
hello();
可以不匹配
1) 如果实参个数比形参个数多, 则多出的参数不参与函数运算
sum(10, 20, 30); // 30
2) 如果实参个数比形参个数少, 则此时多出来的形参值为 undefined
sum(10); // NaN, 相当于 num2 为 undefined.
var add = function() {
var sum = 0;
for (var i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}
console.log(add(10, 20)); // 30
console.log(add(1, 2, 3, 4)); // 10console.log(typeof add); //function
某个标识符名字在代码中的有效范围.
在 ES6 标准之前, 作用域主要分成两个
全局作用域: 在整个 script 标签中, 或者单独的 js 文件中生效.
局部作用域/函数作用域: 在函数内部生效.
// 全局变量
var num = 10;
console.log(num);
function test() {
// 局部变量var num = 20;
console.log(num);
}
function test2() {
// 局部变量
var num = 30;
console.log(num);
}
test();
test2();
console.log(num);
// 执行结果
10
20
30
10
注意：
1.创建变量时如果不写 var, 则得到一个全局变量
函数可以定义在函数内部
内层函数可以访问外层函数的局部变量
var num = 1;
function test1() {
var num = 10;
function test2() {
var num = 20;console.log(num);
}
test2();
}
test1();
// 执行结果
20
在 JS 中, 字符串, 数值, 数组, 函数都是对象.
每个对象中包含若干的属性和方法.
var a = {}; // 创建了一个空的对象
var student = {
name: '蔡徐坤',
height: 175,
weight: 170,
sayHello: function() {
console.log("hello");
}
};
属性和方法使用键值对的形式来组织.
// 1. 使用 . 成员访问运算符来访问属性 `.` 可以理解成 "的"
console.log(student.name);
// 2. 使用 [ ] 访问属性, 此时属性需要加上引号
console.log(student['height']);
// 3. 调用方法, 别忘记加上 ()
student.sayHello();
var student = new Object(); // 和创建数组类似
student.name = "蔡徐坤";
student.height = 175;
student['weight'] = 170;
student.sayHello = function () {
console.log("hello");
}
console.log(student.name);
console.log(student['weight']);
student.sayHello();
function 构造函数名(形参) {
this.属性 = 值;
this.方法 = function...
}
var obj = new 构造函数名(实参);
function Cat(name, type, sound) {
this.name = name;
this.type = type;
this.miao = function () {
console.log(sound); // 别忘了作用域的链式访问规则
}
}
var mimi = new Cat('咪咪', '中华田园喵', '喵');
var xiaohei = new Cat('小黑', '波斯喵', '猫呜');
var ciqiu = new Cat('刺球', '金渐层', '咕噜噜');
console.log(mimi);
mimi.miao();
new 的执行过程:
1. 先在内存中创建一个空的对象 { }
2. this 指向刚才的空对象(将上一步的对象作为 this 的上下文)
3. 执行构造函数的代码, 给对象创建属性和方法
4. 返回这个对象 (构造函数本身不需要 return, 由 new 代劳了)
1. JavaScript 没有 "类" 的概念
2. JavaScript 对象不区分 "属性" 和 "方法"
3. JavaScript 对象没有 private / public 等访问控制机制
4. JavaScript 对象没有 “封装”，"继承"，“多态”