页面树结构
转至元数据结尾
转至元数据起始

正在查看旧版本。 查看 当前版本.

与当前比较 查看页面历史

« 前一个 版本 4 下一个 »

一、JavaScript介绍

  • 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、变量声明

变量可以理解为给值起一个名字,在代码的其他位置可以通过名字找到具体的值,变量声明使用关键字letvar 关键字

  • 变量:

    • var name = 'jack'
      let name = 'jack'
  • 常量:const

    • const pi = 3.1415926535
    • 常量声明的时候就需要赋值,赋值完成后就无法再对其值进行修改

  • 变量名规范

    • 需要遵循驼峰体命名的原则,变量首字母要求小写,若有多个英文单词拼接的变量名,第二个单词首字母需要大写,如userName

    • 变量命名时要避免使用特殊字符,如-=+/\|!@#$%^&*()

    • 变量命名时不能使用js保留的关键字来作为变量名。关键字可参考:JavaScript 保留关键字

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==8false
===绝对等于(值和类型均相等)x==="5" / x===5true/ false
!=不等于x!=8true
!==不绝对等于(值和类型有一个不相等,或两个都不相等)x !== "5"true
>大于x>8false
<小于x<8true
>=大于或等于x>=8false
<=小于或等于x<=8true


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。
  • 无标签