[前端] JavaScript

背景

• 同于网页和用户之间的交互
• 由语言基础，BOM和DOM组成
• AJX（Asynchronous JavaScript and XML）：异步请求数据

基本语法

• document：js内置对象，代表浏览器文档部分
• document.write("Hello js");
• ja代码必须放在script标签中，script标签建议放在head标签中
• 代码较多时，放在一个js文件中，再引用

• <
  script
  src
  =
  "https://how2j.cn/study/hello.js"
  ></
  script
  >

• 注释

• // 单行注释
• /* 多行注释 */

变量

• 标识符：字母、数字、下划线、$
• $常用来定义函数，如将document.getElementById("nologin").innerHTML简写为$("nologin").innerHTML
• var x = 1; 或 x = 1;

调试

• alert(1);
• firefox中的调试功能
• console.log()

数据类型

• undefined：变量声明但未赋值
• Boolean：true或false
• Number：各种进制，浮点数，科学计数法的数字
• String：字符串（js没有字符）
• js中的变量是动态类型的
• 使用 typeof 判断数据类型
• null：对象不存在

类型转换

• 伪对象：基本类型也有属性和方法
• toString()：转换为字符串
• String()：转换为字符串（可处理null）
• Number()：转换为数字
• parseInt()：转换为数字
• parseFloat()：转换为数字
• Boolean()：转换为布尔值

函数

• function：定义一个函数
• function print ( 参数 ) { 函数体 return 返回值} 

作用域

• 参数作用域

• 函数参数的作用域在函数内部

• 全局变量作用域

• 定义在函数前为全局变量，可在所有函数中访问

事件

• js允许html与用户交互的行为，用户任何对网页的操作都会产生一个事件，如鼠标移动、点击等

 运算符

• 基本运算符：+、-、*、/、%
• 自增、自减运算符：++、--
• 赋值运算符：=、+=、-=、*=、/=、%=
• 逻辑运算符：==、!=、>=、<=
• 三目运算符：?:

条件语句

• if...else...：条件判断
• else if：多条件判断
• switch：多条件判断

循环语句

• for：循环语句
• while：循环语句
• do-while：循环语句，至少执行一次
• forEach：增强型循环
• continue：继续下一次循环
• break：终止循环

错误处理

• try...catch：捕捉可能产生的错误，保证剩下的语句可以执行

对象

• js中的对象是有着属性和方法的一种数据类型
• 数字（Number）

• new Number()：创建Number对象
• 属性

• MIN_VALUE：Number的最小值
• NaN：表示不是数字

• 方法

• toFixed()：返回一个数字的小数表达
• toExponential()：返回一个数字的科学计数法表达
• valueOf()：返回一个数字对象的基本数字类型

• 字符串（String）

• new String()：创建字符串对象
• 属性

• length：字符串长度

• 方法

• charAt()：返回指定位置字符
• concat()：拼接字符串
• indexOf()：字符串出现的位置
• localeCompare()：比较两段字符串是否相同
• substring()：截取一段子字符串
• split()：根据分隔符把字符串转换为数组
• replace()：替换子字符串

• 数组（Array）

• 动态数组，长度可变
• new Array()：创建数组对象
• 属性

• length：数组长度

• 方法

• for()：遍历数组
• concat()：连接数组
• join()：指定分隔符，返回一个数组的字符串表达式
• push()：在最后位置插入数据
• pop()：在最后位置获取并删除数据
• unshift()：在开始位置插入数据
• shift()：在最后位置获取并删除数据
• sort()：对数组内容排序
• sort(comparator)：自定义排序算法
• reverse()：对数组内容反转
• slice()：获取子数组
• splice()：删除和插入元素

• 日期（Date）

• new Date()：创建日期对象
• getFullYear()：获取年
• getHours()：获取时
• getDay()：一周的第几天
• getTime()：经历的毫秒
• setFullYear()：修改日期和时间

• 数学运算（Math）

• 属性

• E：自然对数
• PI：圆周率

• 方法

• abs()：绝对值
• min()：最小值
• max()：最大值
• pow()：求幂
• round()：四舍五入
• random()：随机数

• 自定义对象

• 方法1

• <script>
• var hero = new Object();
• hero.name = "Gareen";
• obj.kill = function(){...}
• </script>

• 方法2

• <script>
• function Hero(name){
• this.name = name;
• this.kill = function(){...}
• }
• var gareen = new Hero("Garren");
• gareen.kill();
• </script>

• 为已存在的对象增加新方法

• Hero.prototype.keng = function(){...}

BOM

• 浏览器对象（Browser Object Model）
• Window：窗口
• Navigator：浏览器

• 提供浏览器的相关信息

• Screen：客户端屏幕

• 用户屏幕相关信息，如分辨率等

• History：访问历史

• back()：返回上一次访问
• go(-2)：返回上上次访问

• Location：浏览器地址栏

• reload()：刷新当前页面

• 弹出框

• alert()：警告框
• confirm()：确认框
• prompt()：输入框

• 计时器

• setTimeout()：只执行一次
• setInterval()：不停重复执行
• clearInterval()：终止重复执行
• 不要在setInterval调用的函数中使用doucument.write()