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
- 转为false
运算符
- 算术运算符
- + 加
- - 减
- * 乘
- / 除
- % 取余
- 关系运算符
- ==
- ===恒等
- !=
- >
- <
- >=
- <=
- 赋值运算符
- =
- +=
- 如:num+=1 等价于 num= num+1
- -=
- *=
- /=
- %=
- 一元运算符
- a++
- 先返回原值,再计算
- ++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 = {};
- 实例化方式(内置构造函数)
- var obj = new Object()
- 实例化自定义构造函数方式
- function fun(){}
- var f = new fun()
- 字面量声明
- 获取对象的属性或方法
- 格式:对象.属性名
- 在对象内部获取对象的属性或方法
- 格式:this.属性名
- this
- 永远指向一个对象
- this运行在哪个对象下,就指向哪个对象
- 永远指向一个对象
- 对象的遍历
- for ...in 循环
- for(键 in 对象){console.log(对象名[键]);}
- for ...in 循环
- 对象属性的删除
- delete 对象名.属性名
- 包装对象
- 原始类型的数据在一定条件下自动转为对象
- 数学对象
- Math
- 取绝对值 .abs()
- 取随机数 .random()
- Math
- 时间对象
- Date
- JS中获取的时间是计算本地时间
- 实例化构造函数获取时间对象
- var da = new Date()
- 获取小时 .getHours()
- 获取年 .getFullYear()
- 获取月份 .getMonth()
- JS中月份的数组是从0开始的
- 获取日期 .getDate()
- Date
- 数组对象
- 获取数组长度 .length
- 插入元素 .push(元素)
- 删除最后一个元素 .pop()
- 字符串对象
- var n = ‘JavaScript’
- 将字符串全转为小写 .toLowerCase()
- 将字符串全转为大写 .toUpperCase()
事件响应
事件为异步事件
何为事件:用户鼠标的点击,键盘某个按键的点击
基本交互方法
- 输出方法
- document.write(内容) 写入HTML文档
- 信息对话框
- alert(内容)
- 接收到的是字符串值
- alert(内容)
- 选择对话框
- confirm(内容)
- 接收一个参数,并转为字符串显示
- 返回一个值,true或false
- confirm(内容)
- 显示提示的对话框
- prompt(提示文本内容,文本输入框为默认文本)
- 接收两个参数,第二个参数可不填
- 只返回一个值,用户点击取消时,返回null
- prompt(提示文本内容,文本输入框为默认文本)
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';
- 通过改变display样式来隐藏HTML元素
- JavaScript改变html内容