JavaScript（更新中）

JavaScript

介绍

解释型语言

• 代码的执行分为两个阶段
  • 解析（编译）阶段：语法检查、变量及函数进行声明
  • 运行阶段：变量的赋值，代码流程的执行

运行在客户端

三种添加方式

• 内部的
  • < script>内容< /script>
• 外部的
  • < script src="name.js">< /script>
• 内联的
  • < button onclick="createParagraph()"> Click me< /button>

特性：

• JavaScript语句区分大小写
• 不允许访问本地硬盘，并且不能将数据存到服务器上

语法基础

注意

• 不区分整型和浮点型
• 语句结尾加 ;
• 注释符：和c语言一样

其他：

• 浏览器的console调试JS
  • 输出信息console.log（）
• 查看变量类型
  • typeof（变量）
• 字符串可用加号连接

变量

• 声明
  • var name
• 命名规则
  • 不能数字开头
  • 不能以保留字命名
  • 驼峰式命名法
    • 第一个字母应小写，此后每一个单词中的第一个字母当为大写

数据类型

• 基础数据类型
  • String字符串
  • Number数值型
  • Boolean布尔型
  • Null空值
    • 使用typeof检测类型时，输出object型
  • Undefined未定义型
• 引用数据类型
  • Object对象
• 数据类型的转换
  • parseInt（）转为整型
  • parseFloat（）转为浮点型
  • String（）转为字符串型
  • Boolean（）转换为布尔型
    • 转为false
      • 0、空，其余都转为true
    • 转为true

运算符

• 算术运算符
  • + 加
  • - 减
  • * 乘
  • / 除
  • % 取余
• 关系运算符
  • ==
  • ===恒等
  • !=
  • >
  • <
  • >=
  • <=
• 赋值运算符
  • =
  • +=
    • 如：num+=1 等价于 num= num+1
  • -=
  • *=
  • /=
  • %=
• 一元运算符
  • a++
    • 先返回原值，再计算
  • ++a
    • 先计算，再返回原值
• 逻辑运算符
  • 逻辑与 &&
  • 逻辑或 ||
  • 逻辑非 ！
  • 运算符的优先级
    • &&优先于||

流程控制

• 语法基本与c语言一致
• 条件语句
  • if（）{.....}
  • else if
  • else
• switch ...case语句
  • 注意加 break语句
• 循环结构
  • while
  • do..while
  • for

数组

• 与c语言有些不同
• 可以存放任何类型的数据
• 多维数组
  • 支持数组中存放数组
• 创建
  • 字面量方式
    • var arr[1,2,'hello']
  • 构造函数方式
    • var a1 = new Array（1,2,‘hello’）
• 操作
  • 全部输出
    • console.log(arr)
  • 取值
    • 注：第一位为0
    • arr[0]、arr[1]
  • 获取数组长度
    • 数组名.length

函数

• 声明方式
  • 关键字声明
    • function 函数名（）{.....}
  • 表达式声明
    • var 变量名 = function（）{......}
• 调用
  • 名字+括号
• 参数
  • 形参
    • function f（形参1，形参2）{.....}
  • 实参（调用时的参数）
    • f（实参1，实参2）
• 返回值
  • return 返回值
• 匿名函数
  • var 变量名 = function（）{......}
• 立即执行函数（自调用匿名函数）
  • 防止全局变量污染，封装一个局部作用
  • （function（）{......}）（）
• 函数可被当做参数，被传入另一个函数中
• 函数可被当做参数，return返回

作用域

• 全局作用域
  • 函数外
• 局部作用域
• 变量提升
  • 在代码执行前变量已经在编译阶段被声明了

对象

• 属性（特征）
• 方法（行为）
• 声明
  • 字面量声明
    • var obj = {}；
      • 对象中的数据都是以键值对的形式存在的,如果值是函数则称为方法，var obj = {age:12,high:180,name:'哈哈',fly:function(){}}
  • 实例化方式(内置构造函数)
    • var obj = new Object()
  • 实例化自定义构造函数方式
    • function fun（）{}
    • var f = new fun()
• 获取对象的属性或方法
  • 格式：对象.属性名
  • 在对象内部获取对象的属性或方法
    • 格式：this.属性名
• this
  • 永远指向一个对象
    • this运行在哪个对象下，就指向哪个对象
• 对象的遍历
  • for ...in 循环
    • for（键 in 对象）{console.log（对象名[键]）;}
• 对象属性的删除
  • delete 对象名.属性名
• 包装对象
  • 原始类型的数据在一定条件下自动转为对象
• 数学对象
  • Math
    • 取绝对值 .abs()
    • 取随机数 .random（）
• 时间对象
  • Date
    • JS中获取的时间是计算本地时间
    • 实例化构造函数获取时间对象
      • var da = new Date()
    • 获取小时 .getHours()
    • 获取年 .getFullYear()
    • 获取月份 .getMonth()
      • JS中月份的数组是从0开始的
    • 获取日期 .getDate()
• 数组对象
  • 获取数组长度 .length
  • 插入元素 .push（元素）
  • 删除最后一个元素 .pop()
• 字符串对象
  • var n = ‘JavaScript’
  • 将字符串全转为小写 .toLowerCase（）
  • 将字符串全转为大写 .toUpperCase（）

事件响应

事件为异步事件

何为事件：用户鼠标的点击，键盘某个按键的点击

基本交互方法

• 输出方法
  • document.write（内容） 写入HTML文档
• 信息对话框
  • alert（内容）
    • 接收到的是字符串值
• 选择对话框
  • confirm（内容）
    • 接收一个参数，并转为字符串显示
    • 返回一个值，true或false
• 显示提示的对话框
  • prompt（提示文本内容，文本输入框为默认文本）
    • 接收两个参数，第二个参数可不填
    • 只返回一个值，用户点击取消时，返回null

JS中的异步

同步：一定要等任务执行完了，得到结果，才执行下一个任务。

异步：不等任务执行完，直接执行下一个任务。

JavaScript修改html

• document.getElementByld()
  • JavaScript改变html内容
    • document.getElementByld("demo").innerHTML = "hello javascript";查找id=“demo”的HTML元素，并把元素内容（innerHTML）更改为“hello javascript”
  • JavaScript改变html属性
    • document.getElementByld("myImage").src='地址'; 查找id=''myImage'的HTML元素，并修改元素的src属性值
  • JavaScript隐藏、显示html属性
    • 通过改变display样式来隐藏HTML元素document.getElementByld("demo").style.display='none';
    • 通过改变display样式来显示HTML元素document.getElementByld("demo").style.display='block';