一、JavaScript简述
- HTML:用来写网页;
- CSS:美化页面;
- JavaScript:控制页面特效;
- JavaScript:脚本语言;要嵌入到其他语言,结合使用;直接被浏览器解析执行;没有访问系统文件权限(安全);无需编译,直接由上到下解释执行;
- Java:编程语言;独立运行;先编译再执行;
- Java 和 JavaScript 没有任何直接关系;
二、JavaScript组成
- ECMAScript:(核心)规定了 JS 的语法和基本对象;
- DOM:文档对象模型:处理网页内容的方法和接口;
标记型文档,HTML; - BOM:浏览器对象模型:与浏览器交互的方法和接口;
三、JavaScript的引入
1. 内部脚本
- 当前页面内部写 script 标签,script 内部即可书写 JavaScript 代码;
<script type="text/javascript">
JavaScript 代码
</script>
2. 外部引入
- 在 HTML 文档中,通过
<script src="">
标签引入.js文件;
<script type="text/javascript" src="javascript文件路径"></script>
- 注意:外部引用时 script 标签内不能有 script 代码,即使写了 也不会执行;
<script type="text/javascript" src="javascript文件路径">
//这部分代码不会被执行,被引入的 JS 文件覆盖;
</script>
3. 放置位置
script
标签的放置位置为:Body 结束标签前;- 优点:保证HTML展示内容优先加载,最后加载脚本;增强用户体验性;
四、JavaScript语法
1. 注释
- 单行注释://
- 多行注释:/**/
2. 变量
(1)变量简述
- 变量的声明:
var 变量名;
,默认值为 underfined; - 变量的声明和赋值:
var 变量名 = 值;
- 变量区分大小写;
(2)基本数据类型
- string:字符串类型,’ ’ 和 " " 都代表字符串;
- boolean:布尔类型,true 和 false;
- number:数字类型,任意数字;
- null:空,一个占位符;
- underfined:未定义类型.,表示变量声明了但未赋值;
underfined == null
(3)注意
- JavaScript 是弱类型语言,一个变量声明好之后,可以赋予任意类型的值;
- 用 typeof 运算符可以分辨变量的值属于哪种基本数据类型;
typeof(str1);
(4)引用数据类型
- 所处理的引用数据类型都是对象;
- 标准创建方式:
var str = new String();
var str = new String;
3. 运算符
(1)比较运算符
(2)逻辑运算符
4. 正则对象
(1)RegExp 对象的创建方式
- 直接量方式的正则是对象,不是字符串,别用引号;
直接量中存在边界,即^代表开始,$代表结束;
var reg = /^表达式$/ (直接量方式)
(2)test 方法
- 返回 true 或 false,判断字符串是否符合正则表达式;
(3)注意事项
/^表达式$/
,直接量方式,必须全部字符符合正则表达式,才能返回 true;(适用于表单校验)/表达式/
,普通方式,必须全部字符不符合正则表达式,才能返回 false;
只要有一个符合,则返回 true;(适用于字符串查找、替换)
5. JS数组对象
(1)JS 数组的特性
- JS 数组可以看作 Java 中的 ArrayList 集合;
- 数组中每个成员没有类型限制,可以存放任意类型;
- 数组的长度可以自动修改;
(2)JS 数组的四种创建方式
① var arr = [1,2,3,"a",true];
//数组长度为5;
② var arr = new Array();
//数组长度默认为0;
③ var arr = new Array(4);
//数组长度为4,每个元素是undefined;
④ var arr = new Array(“a”,5);
//数组元素是"a",5;
(3)JS 数组的常用属性/方法
- length:长度;
- join():把数组所有元素根据 分隔符进行拼接,最终返回一个字符串;(不会影响原数组)
- pop():删除并返回数组最后一个元素;
- push():向数组末尾添加一个或多个元素,并返回新的长度;
- reverse():翻转;(把元素下标进行互换)(会影响原数组)
6. 全局函数
(1)执行
- eval():计算某个字 符串,并执行其中的 JavaScript 代码;
- 作用:用于增强程序的扩展性;
- 注意:只可以传递原始数据类型 string,传递 String 对象无作用;
(2)编码和解码
URL 编码作用:保证数据传递的完整性;
- encodeURI():把字符串编码为 URI;
- decodeURI():解码某个编码的 URI;
- URI 和 URL 的区别:
URI 是统一资源标识符;标识资源详细名称;(包含资源名)
URL 是统一资源定位器;定位资源的网络位置;(包含 http://)
(资源:可以通过浏览器访问的信息,如:图片、文本、HTML、CSS 等)
(3)字符串转数字
- parseInt():解析一个字符串并返回一个整数(小数点后面不管);
- parseFloat():解析一个字符串并返回一个浮点数;
7. 自定义函数
(1)函数格式
function 方法名(参数列表){
}
- 无需定义返回值类型;
- 参数定义无需使用 var 关键字,否则报错;
(2)函数的使用
- JavaScript 函数调用执行完毕一定有返回值,值及类型根据 return 决定,如果未 return 具体值,返回值为 undefined;
- JavaScript 函数名若同名,则不存在方法重载,只有方法相互覆盖,最后定义的函数覆盖之前的定义;
- JavaScript 不存在函数重载,所以仅根据方法名来调用函数,即使实参与形参不匹配,也不会影响正常调用;
8. 自定义对象
(1)function 构造函数
- JavaScript 中的引用数据类型都是对象,而对象在 JavaScript 中可以调用函数来表示;
- 相当于 Java 中创建的某个 class 类;
无形参格式:
function 对象名(){
函数体
}
带参数格式:
function 对象名(参数对象){
函数体
}
有属性格式:
function 对象名(){
this.属性名1 = 属性值1;
this.属性名2 = 属性值2;
}
属性定义方式
- this 关键字,在对象的声明定义阶段,定义一个属性;
- 创建对象后,使用 对象.属性 方式,动态定义属性;
(2)对象直接量
var 对象名 = {属性名1:"属性值1", 属性名2:"属性值2", 属性名3:"属性值4"...};
注意:该方式直接创建出实例对象,无需构建函数,无需再 new 创建实例对象,直接使用即可;