[前端] JavaScript

背景

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

基本语法

document：js内置对象，代表浏览器文档部分
document.write("Hello js");
ja代码必须放在script标签中，script标签建议放在head标签中
代码较多时，放在一个js文件中，再引用
- <scriptsrc="https://how2j.cn/study/hello.js"></script>
注释
- // 单行注释
- /* 多行注释 */

变量

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()

猜你喜欢