一、JavaScript简介
1、JavaScript到底是什么?
JavaScript(缩写:JS)是一门完备的 动态编程语言。当应用于 HTML 文档时,可为网站提供动态交互特性。
JavaScript作为Netscape Navigator浏览器的一部分首次出现在1996年。它最初的设计目标是改善网页的用户体验。由布兰登·艾克( Brendan Eich,Mozilla 项目、Mozilla 基金会和 Mozilla 公司的联合创始人)发明。初期被命名为LiveScript,后因和Sun公司合作,因市场宣传需要改名JavaScript。后来Sun公司被Oracle收购,JavaScript版权归Oracle所有。
JavaScript 的应用场合极其广泛,简单到幻灯片、照片库、浮动布局和响应按钮点击,复杂到游戏、2D/3D 动画、大型数据库驱动程序等等。
2、JS的组成部分
- 核心ECMAScript(脚本语言规范)
1996年11月,javascript的创造者Netscape公司,决定将JavaScript提交给国际标准化组织ECMA,希望这种语言能够成为国际标准。次年,ECMA发布262号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为ECMAScript,这个版本就是1.0版。
该标准从一开始就是针对JavaScript语言制定的,但是之所以不叫JavaScript,有两个原因。一是商标,Java是Sun公司的商标,根据授权协议,只有Netscape公司可以合法地使用JavaScript这个名字,且JavaScript本身也已经被Netscape公司注册为商标。二是想体现这门语言的制定者是ECMA,不是Netscape,这样有利于保证这门语言的开放性和中立性。
因此,ECMAScript和JavaScript的关系是,前者是后者的规格,后者是前者的一种实现(另外的ECMAScript方言还有Jscript和ActionScript)。在日常场合,这两个词是可以互换的。
- 文档对象模型DOM(Document Object Model)
- 浏览器对象模型BOM(Browser Object Model)
3、引入方式
与css类似
- 行内:
<开始标签 on+事件类型=“js代码”></结束标签>
<button onclick="alert('行内js')">
- 内嵌:
写在 head 或 body 标签内
<script>
alert('内嵌js')
</script>
- 外部文件:
定义外部 .js文件。
将 script 标签放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。如果先加载的 JavaScript 期望修改其下方的 HTML,那么它可能由于 HTML 尚未被加载而失效。因此,将 JavaScript 代码放在 HTML页面的底部附近通常是最好的策略。
<script src="文件路径.js"></script>
alert('外部js代码')
4、语法规范
- 注释
单行注释:/ /
多行注释:/* */
- 语句
使用;
表示结束,不过只有在单行内需要分割多条语句时,这个分号才是必须的。由表达式、关键字、运算符等组成。 - 大小写敏感
二、JS基本语法
1、变量
1. 变量声明
- 基本语法
声明:var 变量名
声明+赋值:var 变量名 = 值
一次声明多个变量:var 变量名1, 变量名2,…, 变量名n
- 命名规则
- 由字母、数字、下划线以及$组成,不能以数字开头
- 不允许使用JS的关键字和保留关键字:break、case、catch、default、false、new、this、undefined……
- 可以采用小驼峰法:第一个单词全小写,此后单词首字母大写
- 尽量见名知意
2. 数据类型
值类型(基本类型):数字(Number)、字符串(String)、布尔(Boolean)、未定义(Undefined)、空(Null)
引用数据类型:对象(Object)、数组(Array)、函数(Function)
var a = 5; // 数字
var name = "John"; //字符串,字符串的值必须用引号(单双均可,必须成对)扩起来。
var isActive = true; // 布尔,true/false 是 JS 里的特殊关键字,无需引号。
var x; // x为undefined
var value = null; // 空
var student = { // 对象
name: '杜媛',
age: 19
}
var arr = [5, 'cat', undefined] // 数组
var consoleStr = function () { // 函数
console.log('这是一个函数')
}
3. 数据类型转换
typeof()
可以返回变量的6种数据类型:number、string、boolean、undefined、object、function
- 显式类型转换
Number()
转换为数字类型parseInt()
转换为int类型parseFloat()
转换为浮点型变量.toString()
将变量转换为字符串类型String()
转换为字符串类型Boolean()
转换为布尔类型
- 隐式类型转换 隐式类型转换内部隐式调用显示的方法
isNaN()
判断括号内是否为NaN- 运算过程中的隐式类型转换
2、运算符
- 算数运算符 +、-、*、/、%、++、- -
- 比较运算符 和C语言相比,多了=== 和 !==
- 逻辑运算符 &&、||、!
3、条件循环语句
if( ){ }else if( ){ }else{ }
、switch case
for
、while
、do while
break
、continue
4、数组
1. 数组的创建
var arr = []
var arr = new Array()
由于JS的弱检查性,你可以在一维数组中放不同类型的变量。
获取数组元素个数arr.length()
2. 数组的操作
改变原数组的操作:
- 在数组的最后一位添加数据,可以添加一个也可以添加多个
arr.push()
;剪切最后一位数据arr.pop()
,括号中不能传参 - 在第一位加入数据
arr.unshift()
,去掉第一位数据arr.shift()
- 逆反数组
arr.reverse()
- 修改数组
arr.splice(开始位数, 截取长度, 添加的新数据)
不改变原数组的操作:
- 把括号里的数组拼到该数组后面
arr.concat(arr1)
- 截取数组
arr.slice(开始截取位,结束位)
,结束位不包括在里面 - 将数组变成字符串,并用自定义的连接符分隔
arr.join('连接符')
5、对象
JavaScript的对象是一种无序的集合数据类型,它由若干键值对组成,属性由逗号分隔。
1. 对象的创建
var obj = {}
var obj = new Object()
2. 获取对象属性值
对象属性有两种寻址方式:
对象.属性名
对象[“属性名”]
3. 属性的增删
- 增加新属性 直接写新键值对
obj.key = value
- 删除属性
delete obj.key
6、函数
也可以称之为方法(method)或过程,是一段预定义好的代码块。
1. 函数的定义和调用
function fun () { // 函数名应符合小驼峰原则
console.log('这是一个函数')
}
fun()
2. 函数表达式
- 命名函数表达式
这种写法会导致函数名失效
var add = function fun() {
console.log('命名函数')
}
- 匿名函数表达式
var add = function () {
console.log('匿名函数')
}
3. 参数和返回值
- 函数的形参不用指定参数的类型。
- 不定参,形参可以比实参多,实参也可以比形参多。
那么JS如何知道调用时到底传了多少参数,每个参数值又是什么?答案就是arguments,它是JS的一个内置对象,是实参列表。只能在函数体中使用,通常我们将它当做数组使用,但又不是数组。
function sum() {
for(var i = 0; i < arguments.length; i++) {
console.log(arguments[i])
}
}
sum(2, 3, 11); // 依次输出:2 3 11
- return 有终止函数和把一个值返回到函数以外的功能
4. 构造函数
- 在 JavaScript 中,用 new 关键字来调用的函数,称为构造函数。
- 构造函数首字母一般大写。
- 构造函数返回的是一个对象。
为什么要使用构造函数?
在使用对象字面量创建一系列同一类型的对象时,这些对象可能具有一些相似的特征(属性)和行为(方法),此时会产生很多重复的代码,而使用构造函数就可以实现代码复用。
var p1 = { name: 'zs', age: 6, gender: '男', hobby: 'basketball' };
var p2 = { name: 'ls', age: 6, gender: '女', hobby: 'dancing' };
var p3 = { name: 'ww', age: 6, gender: '女', hobby: 'singing' };
var p4 = { name: 'zl', age: 6, gender: '男', hobby: 'football' };
function Person(name, gender, hobby) {
this.name = name;
this.gender = gender;
this.hobby = hobby;
this.age = 6;
}
var p1 = new Person('zs', '男', 'basketball');
var p2 = new Person('ls', '女', 'dancing');
var p3 = new Person('ww', '女', 'singing');
var p4 = new Person('zl', '男', 'football');
三、JS深入概览
1、作用域
变量和函数生效(能被访问)的区域。
- 函数作用域 函数作用域中的变量只在当前函数内可以访问(局部变量),离开此范围就无法访问了。
function add () {
var sum = 1 + 2;
console.log(sum); //正确
}
console.log(sum); //错误
- 全局作用域 全局作用域中的变量在代码的任何位置都能访问。
var sum = 0;
function add () {
sum = 1 + 2;
console.log(sum); //正确
}
console.log(sum) //正确
function add () {
sum = 1 + 2; //不加var,全局变量
}
add();
console.log(sum)
2、预编译
- 函数声明整体提升 无论函数调用和声明的位置是前是后,系统总会把函数声明移到调用前面。
- 变量声明提升 无论变量调用和声明的位置是前是后,系统总会把声明移到调用前,注意仅仅只是声明,所以值是undefined。
console.log(a) //undefined
var a = 100;
console.log(a) //100
// 上面这段代码相当于
var a;
console.log(a)
a = 100;
console.log(a)