JavaScript的概述
1.1 什么是JavaScript
JavaScript是web上一种功能强大的编程语言,用于开发交互式的web页面。它不需要进行编译,而是直接嵌入在HTML页面中,由浏览器执行。
- JavaScript 被设计用来向 HTML 页面添加交互行为。
- JavaScript 是一种脚本语言(脚本语言是一种轻量级的编程语言)。
- JavaScript 由数行可执行计算机代码组成。
- JavaScript 通常被直接嵌入 HTML 页面。
- JavaScript 是一种解释性语言(就是说,代码执行不进行预编译)。
1.2 JavaScript的引入
- ECMAScript:语法,语句.
- BOM:浏览器对象
-
DOM:Document Object Model.操作文档中的元素和内容.
1.3 JavaScript的作用
使用JavaScript添加页面动画效果,提供用户操作体验。主要应用有:嵌入动态文本于HTML页面、对浏览器事件做出响应、读写HTML元素、验证提交数据、检测访客的浏览器信息等。
1.4 JavaScript的引入
在HTML文件中引入JavaScript有两种方式,一种是在HTML文档直接嵌入JavaScript脚本,称为内嵌式,另一种是链接外部JavaScript脚本文件,称为外联式。对他们的具体讲解如下:
- 内嵌式,在HTML文档中,通过<script>标签引入,如下
<script type="text/javascript">
//此处为JavaScript代码
</script>
2.外联式,在HTML文档中,通过<script src=””>标签引入.js文件,如下:
<script src="1.js" type="text/javascript" charset="utf-8"></script>
2. JavaScript语法及规则
2.1 注释
单行注释
//
Hbuilder快捷键 ctrl+/
多行注释
/* */
Hbuilder快捷键 ctrl+shift+/
示例:
2.2 变量
- 变量简述
变量:标示内存中的一块空间,用于存储数据,且数据是可变的。
变量的声明:
var 变量名; //变量赋予默认值,默认值为undefined (未定义的)
变量的声明和赋值:
var 变量名=值; //变量赋予对应的值
在声明JavaScript变量时,需要遵循以下命名规范:
- 必须以字母或下划线开头,中间可以是数字、字符或下划线
- 变量名不能包含空格等符号
- 不能使用JavaScript关键字作为变量名,如:function、this、class
- JavaScript严格区分大小写。
2.3 基本数据类型
类似于java中的基本数据类型
- string 字符串类型。””和’’都是字符串。 JavaScript中没有单个字符
- boolean 布尔类型。 固定值为true和false
- number 数字类型。 任意数字
- null 空,一个占位符。
- undefined 未定义类型,该类型只有一个固定值,即undefined,表示变量声明却未 定义具体的值。
注:因为undefined是从null中派生出来的,所以undefined==null
JavaScript区别于java,是弱类型语言,变量的使用不用严格遵循规范,所以一个变量声明好之后,是可以赋予任意类型的值。
通过typeof运算符可以分辨变量值属于哪种基本数据类型
ECMAScript实现之初的一个bug,null属于基本数据类型,typeof(null)--àobject
2.4 引用数据类型
引用类型通常叫做类(class),但在JavaScript中,因为不存在编译过程,所以没有类的概念,所处理的引用数据类型都是对象。
标准创建方式:
var str = new String();//和java相同
var str = new String; //js独有的方式
2.5 运算符
JavaScript运算符与Java运算符基本一致。
这里我们来寻找不同点进行学习
2.5.1 比较运算符
== 逻辑等。仅仅对比 值
=== 全等。 对比值并且对比类型。
如果值和类型都相同,则为true;值和类型有一个不同,则为false
随堂练习: var x=8; alert(x==8); alert(x===8);
alert(x=="8"); alert(x==="8");
|
2.5.2 逻辑运算符
注:JavaScript逻辑运算符没有 & |
2.6 正则对象
2.6.1 RegExp对象的创建方式
- var reg = new RegExp("表达式"); (开发中基本不用)
- var reg = /^表达式$/; 直接量(开发中常用)
直接量中存在边界,即^代表开始,$代表结束
直接量方式的正则是对象,不是字符串,别用引号
2.6.2 test方法
正则对象.test(string);
用来校验字符串是否匹配正则。
全部字符匹配返回true;有字符不匹配返回false
随堂练习
练习:判断字符串是否为空 var msg=””; var reg = /^\s*$/; alert(reg.test(msg)); |
2.6.3 正则对象使用注意事项
/^表达式$/ 只要有无法成立正则的字符存在,即为false。
全部符合为true
(检查严格,眼睛不揉沙子)
适用于表单校验
/表达式/ 只要有成立正则的字符存在,即为true。
全部不符合为false
(检查不严格,懒人思想)
适用于字符串查找、替换
2.7 JS数组对象
2.7.1JS数组的特性
JS数组可以看做 Java中的ArrayList 集合。
- 数组中的每一个成员没有类型限制,及可以存放任意类型
- 数组的长度可以自动修改
2.7.2 JS数组的四种创建方式
- var arr = [1,2,3,”a”,true]; //常用的JS数组。 长度5
- var arr = new Array();创建一个数组对象,数组长度默认为0
3.var arr = new Array(4);
数组长度是4,相当于开辟了长度为4的空间,每个元素是undefined。(仅在显示数组时进行处理,undefined为了方便显示变成了空字符串形式,其值本质仍然是undefined)
4.var arr = new Array(“a”,”b”,true); //创建了一个数组,长度3, 数组元素是”a”,”b”,true
2.7.3 JS数组的常用属性/方法
物理翻转:就是把元素下标进行互换
2.8 全局函数(global)
2.8.1 执行
作用:用于增强程序的扩展性。
注:只可以传递原始数据类型string,传递String对象无作用。
2.8.2 编码和解码
URL/URI编码:中文及特殊符号 %16进制
作用:保证数据传递的完整性。
2.8.3 URI和URL的区别
URI是统一资源标识符。 标识资源详细名称。
URL是统一资源定位器。 定位资源的网络位置。
资源:可以通过浏览器访问的信息统统称为资源。(图片、文本、HTML、CSS等等。。。。)
URI标识资源的详细名称,包含资源名。
URL定位资源的网络位置。包含http://
例如:
/a.html 是URI
http://www.itcast.cn/a.html 既是URL,也是URI
2.8.4 字符串转数字
parseInt(string); string按照字面值转换为整数类型,小数点后面部分不关注。
parseFloat(string); string按照字面值转换为小数类型。
注:
- 如果字符串的某个字符从字面值上无法转为数字,那么从该字符开始停止转换,仅返回前面正确的转换值。(例如:11.5a55,parseInt结果11,parseFloat结果11.5)
- 如果字符串的第一个字符就无法从字面值上转为数字,那么停止转换,返回NaN
NaN(Not A Number,一个数字类型的标识,表示不是一个正确的数字)
2.9 自定义函数/自定义方法
2.9.1 函数简述及作用
如果一段代码需要被重复编写使用,那么我们为了方便统一编写使用,可以将其封装进一个函数(方法)中。
作用:增强代码的复用性
2.9.2 函数格式
- JavaScript函数定义必须用小写的function;
- JavaScript函数无需定义返回值类型,直接在function后面书写 方法名;
- 参数的定义无需使用var关键字,否则报错;
- JavaScript函数体中,return可以不写,也可以return 具体值,或者仅仅写return;
2.9.3 函数使用的注意事项
JavaScript函数调用执行完毕一定有返回值,值及类型根据return决定,如果未return具体值,返回值为undefined;
JavaScript函数若同名,则不存在方法重载,只有方法相互覆盖,最后定义的函数覆盖之前的定义;
因为JavaScript不存在函数重载,所以JavaScript仅根据方法名来调用函数,即使实参与函数的形参不匹配,也不会影响正常调用;
如果形参未赋值,就使用默认值undefine
2.10 自定义对象
function构造函数
我们知道,JavaScript中的引用数据类型都是对象,而对象在JavaScript中可以用函数来表示。
相当于java中创建某个class类
无形参格式:
function 对象名(){
函数体
}
示例:
效果:
带参数格式:
function 对象名(参数列表){
函数体
}
示例:
效果:
有属性格式:
function 对象名(){
this.属性名1=属性值1;
this.属性名2=属性值2;
…….
}
this表示当前对象。(这个很重要,前端js分层会用到)
示例1:(this表示的是Person对象)
效果1:
示例2:
效果2:
示例3:(无需定义,自由为对象赋予属性及值)
效果3:
应用场景:适用于对象构建及代码复用。
2.10.2 对象直接量
开发中可以用一种简单的方式直接创建自定义的JavaScript对象,这种方式称为“对象直接量”。
格式:
var 对象名 = {属性名1:”属性值1”, 属性名2:”属性值2”, 属性名3:”属性值3”……};
注:该方式直接创建出实例对象,无需构建函数,无需再new创建实例对象,直接使用即可
示例1:
效果1:
示例2:
效果2:
应用场景:适用于快速创建实例对象及数据封装。