JavaScript 被设计为面向HTML 页面增加交互的
脚本语言。用来改进设计、验证表单、检测浏览器、操作HTML元素等，以及更多的应用。JavaScript代码是由浏览器内置的JavaScript引擎执行。JavaScript一种客户端技术，即在本地用户的浏览器中运行。
二、数据类型
javascript 有三种基本数据类型、两种复合数据类型和两种特殊数据类型。
1、基本数据类型是：
字符串（String）: “jack” 或 ‘jack’
数字 (Number): 9, 3.14
布尔 (Boolean): true or false
2、 复合（引用）数据类型是：
对象 (Object): {property: value, ...}
数组 (Array): [e1, e2,...]
3、 特殊数据类型是：
空 ( null )
未定义（Undefined）
三、变量
1、变量声明
变量可以理解为给值起一个名字，在代码的其他位置可以通过名字找到具体的值，变量声明使用关键字let、var 关键字
变量：
var name = 'jack'
let name = 'jack'
常量：const
const pi = 3.1415926535常量声明的时候就需要赋值，赋值完成后就无法再对其值进行修改
变量名规范
需要遵循驼峰体命名的原则，变量首字母要求小写，若有多个英文单词拼接的变量名，第二个单词首字母需要大写，如
userName变量命名时要避免使用特殊字符，如
-=+/\|!@#$%^&*()等变量命名时不能使用js保留的关键字来作为变量名。关键字可参考：
2、数据类型判断
js是弱类型的开发语言，变量的数据类型由所赋值的类型决定，也叫动态类型。
| 代码块 | ||
|---|---|---|
| ||
let variable = 'jack'; |
...
typeof(variable) //output: string |
...
|
...
variable = 123; |
...
typeof(variable) //output: number |
...
|
...
variable = false; |
...
typeof(variable) //output: boolean |
3、类型转换
| 代码块 | ||
|---|---|---|
| ||
let value = "123"; |
...
value + 1 |
...
// 输出：123 |
...
|
...
//转换为整型 |
...
value = parseInt(value); |
...
typeof(value + 1); |
...
// 输出:number |
...
value + 1; |
...
// 输出：124 |
...
|
...
// 浮点型转化 |
...
value = parseFloat(value); |
...
|
...
//字符串类型 |
...
value = ''+value; |
4、详解复合数据类型
对象
对象：对象由属性和函数组成
声明
let object = {
属性名: 值,
属性名: 值,
函数名: 函数体
}
实例
// 声明
let person = {
name: 'andy',
age: 22,
gender: '男'
};
// 调用
person.name
数组
数组对象的作用：使用单独的变量名来存储一系列的值。
数组的使用
声明：
let arr = []
或
let arr = new Array();
添加值
// 下标赋值
arr[0] = 1;
arr[1] = 2;
arr[2] = 3;// 将值添加到数据尾部
arr.push(1);
arr.push(2);
arr.push(3);// 声明赋值
let arr = [1,2,3]
取值
下标取值
arr[0]
四、运算符
1、运算符
运算符主要是用来做值之间的四则运算
赋值
=四则运算
加
+、减-、乘*、除/
取模（余数）
%示例：
5%2=1
自增
++自减--示例：
i++ i-- ++i --i
运算后赋值
+= -= *= /=let x = 1;
x += 1 => x = x + 1
x -= 1 => x = x - 1
x *= 1 => x = x * 1
x /= 1 => x = x / 1
x %= 1 => x = x % 1
2、比较运算符
比较运算符主要对两个值进行比较如大于、等于、小于等，比较的代码可以被称为表达式，如1>2，最总表达式会输出一个布尔值 true false
x=5，下面的表格解释了比较运算符：
| 运算符 | 描述 | 比较 | 返回值 |
|---|---|---|---|
| == | 等于 | x==8 | false |
| === | 绝对等于（值和类型均相等） | x==="5" / x===5 | true/ false |
| != | 不等于 | x!=8 | true |
| !== | 不绝对等于（值和类型有一个不相等，或两个都不相等） | x !== "5" | true |
| > | 大于 | x>8 | false |
| < | 小于 | x<8 | true |
| >= | 大于或等于 | x>=8 | false |
| <= | 小于或等于 | x<=8 | true |
3、逻辑运算符
逻辑运算符主要用来判断连接两个表达式之间逻辑关系，即与、或、非
| 运算符 | 描述 | 详解 | 示例 |
|---|---|---|---|
| && | and | 两个全为true才为true | (9 < 10 && 5 > 1) 为 true |
| || | or | 两个全为false的时候才为false | (6==5 || 8==5) 为 false |
| ! | not | 对得到的结果取反 | !(2==3) 为 true |
4、条件运算符（三元运算符）
用于特定条件下返回某些特殊值，可以理解为一个简单的条件控制语句。
| 代码块 | ||
|---|---|---|
| ||
// 判断是否成年 |
...
age>18 ? "成年":"未成年"; |
四、流程控制结构
1、条件结构
条件结构由if...else...来组成：
| 代码块 | ||
|---|---|---|
| ||
if(条件表达式) { |
...
..... |
...
} else if(条件表达式) { |
...
.... |
...
} else { |
...
.... |
...
} |
...
示例： |
...
if(age <18) { |
...
console.log("未成年人") |
...
} else if(age<=45) { |
...
console.log("成年人") |
...
} else if(age<=65) { |
...
console.log("中年人") |
...
} else { |
...
console.log("老年人") |
...
} |
2、循环结构
在需要循环处理相同的代码逻辑时可以使用循环结构
| 代码块 | ||
|---|---|---|
| ||
for (语句 1; 语句 2; 语句 3) { |
...
被执行的代码块 |
...
} |
...
// 增强for循环 |
...
for (变量 in 数值或对象) { |
...
... |
...
} |
...
示例： |
...
//循环结构 |
...
let arr = ['james','mike', 'andy']; |
...
for(let i=0; i<arr.length; i++) { |
...
console.log(arr[i]); |
...
} |
...
// for-each结构 |
...
for(index in arr) { |
...
console.log(arr[index]); |
...
} |
五、函数
1、函数声明
函数常用于将复用性较高的逻辑或复杂的代码处理块进行封装，能让主体代码逻辑更清晰代码更美观，同时解决代码复用的问题。
| 代码块 | ||
|---|---|---|
| ||
function 函数名(参数) { |
...
函数体 |
...
return 返回体; |
...
} |
...
// 声明一个函数 |
...
function addOne(x) { |
...
return x+1; |
...
} |
...
// 调用 |
...
let a = 1; |
...
addOne(1) |
...
addOne(a) |
2、箭头函数
除去funcation关键字声明的函数，js的还支持更为简洁的函数命名方式，即箭头函数
| 代码块 | ||
|---|---|---|
| ||
// 声明方式 |
...
(参数1,参数2) => { |
...
函数体 |
...
return 返回体; |
...
} |
...
(参数1, 参数2, …, 参数N) => 表达式(单一) |
...
// 相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; } |
...
单一参数 => 返回体 |
...
// s => ++s; |
箭头函数常用于某些需要传入函数的参数为一个函数的时候
| 代码块 | ||
|---|---|---|
| ||
setTimeout(() => { |
...
console.log(123); |
...
},2000) |
...
// setTimeout(延时调用的函数,延时时间) |
六、浏览器对象模型（BOM）
BOM: 浏览器对象模型，其中包含浏览器中的一系列对象，如: window, location, screen, status, menu等对象。
| 代码块 | ||
|---|---|---|
| ||
# 弹出框 |
...
alert() |
...
显示带有一段消息和一个确认按钮的警告框。 confirm() |
...
显示带有一段消息以及确认按钮和取消按钮的对话框。 prompt() 显示可提示用户输入的对话框。 |
...
|
...
# window对象 |
...
window.innerHeight |
...
浏览器高度 window.innerWidth 浏览器宽度 |
...
window.open() 打开新窗口 |
...
window.open(url,'//打开位置','height,width,top,boottom') |
...
window.close() 关闭当前窗口 |
...
scrollTo() 把内容滚动到指定的坐标。 |
...
|
...
# history对象 |
...
window.history.forward() |
...
下一步 window.history.back() 上一步 |
...
|
...
# location对象 |
...
window.location.href |
...
# 获得当前页面的url |
...
window.location.href = url |
...
# 跳转到指定的url |
...
window.location.reload() |
...
# 刷新页面 |
...
|
...
# 计时器相关 |
...
setInterval() |
...
按照指定的周期（以毫秒计）来调用函数或计算表达式。 clearInterval() |
...
取消由 setInterval() 设置的 timeout。 |
...
setTimeout() 在指定的毫秒数后调用函数或计算表达式。 |
...
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。 |
七、视频教学
JavaScript入门：https://my.smartbi.com.cn/edu/course-122
