一、js介绍
1.js背景
js全称是javascript,是web的脚本语言。它最初由Netscape(网景公司)的Brendan Each(布兰登·艾奇,javascript之父)发明,刚开始的命名是Livescript,后来Netscape公司与Sun公司合作,为了让它看起来像Java,才改名为Javascript。因此JS与Java在语法、名称和命名规范上都有许多相似之处。
2.js特点
- 是一门脚本语言。
- 是一种轻量级的编程语言。
- 是可插入 HTML 页面的编程代码。
- 插入 HTML 页面后,可由所有的现代浏览器执行。
3.js组成
- ECMAScript(一种脚本语言的标准化规范)
- 文档对象模型(DOM)
- 浏览器对象模型(BOM)
4.引入方式
行内引用:
<button type="button" onclick="console.log('我是行内引用')">行内引用</button>
内嵌(写在head或body里):
<script>
function myFunc(){
console.log("我是内嵌js")
}
</script>
外部引用:
<script src="文件路径.js"></script>
注意:js代码以及引入最好放到底部,因为浏览器渲染网页是从上往下,如果js代码放在前面,浏览器就会优先加载js,导致html页面加载不完全,出现bug。
如果想放在前面,可以在js中使用window.onload
方法。这个方法用于在网页加载完毕后立刻执行的操作,即当 HTML 文档加载完毕后,立刻执行某个方法。
window.onload = function(){
....
}
5.输出
- 使用 window.alert() 弹出警告框。
- 使用 console.log() 写入到浏览器的控制台。
- 使用 confirm() 弹出确认框。
- 使用 prompt() 返回用户的回答
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 innerHTML 写入到 HTML 元素。
注意:出现提示类窗口时,程序的执行都会暂停,等待用户动作后再继续执行
<script>
console.log("写入控制台");
alert("警告框")
confirm("欢迎来到我的网页")
prompt('你的名字是')
document.write("重写网页")
bt3.innerHTML = '重写HTML'
</script>
6.语法规范
// 单行注释 快捷键 control + /
/* 多行注释 */ 快捷键 shift + alt + a
- 使用
;
表示结束。但只有一行内写了多个语句,才必须写分号。js有分号自动补全功能,当一行只有一条语句的时候,可以不加分号。 - 严格区分大小写。
- 忽略空白符(空格 换行 tab)
- 注意标识符和关键字(关键字会自动高亮)
二、js基础语法
1.变量
1.变量声明
在编程语言中,变量用于存储数据值。JavaScript
使用关键字var
来定义变量, 使用等号来为变量赋值,变量之间可以相互操作:
var a
var b = 1
var c,d,e
2.命名规则
- 由字母、数字、下划线以及$组成,不能以数字开头。
- 不允许使用JS的关键字和保留关键字:break、case、catch、default、false、new、this、undefined……
- 可以采用驼峰命名法:第一个单词全小写,此后单词首字母大写。
- 尽量见名知意
2.数据类型
JavaScript
拥有动态类型。这意味着相同变量可用作不同类型:也就是说先声明再定义,定义值可以覆盖。
var x // 现在 x 是undefind
var x = 2; // 现在 x 是数值
var x = "string"; // 现在 x 是字符串值
1.基本数据类型(值类型):
- 数字(Number):int、float、NaN (程序出现错误时出现,不是一个数,但本身是一个Number类型)、Infinity (无穷)。
- 字符串(String):使用单/双引号成对括起来;字符串断行时,可使用
+
连接几个字符串;模板字符串,使用反引号 。
var name1 = 'LiLei'
var name2 = 'HanMeiMei'
console.log(name1 + ' ' + name2);
var html = `<h3>我是模板字符串</h3>
<button>按钮</button>`
document.getElementById('data').innerHTML = html
- 布尔(Boolean):true、false,是JS中的特殊关键字,不需要加引号,加了就变成字符串。
- 未定义(Undefined)、空(Null)
var state = true;
var name;
var name
console.log(name,typeof(name)); //undefined 'undefined'
var value = null
console.log(value,typeof(value)); //null 'object'
2.引用数据类型:
- 对象(Object)::
{ }
包裹,里面是一项项键值对。 - 数组(Array):
[ ]
包裹,每一项可以是字符串、数字、对象等任何数据类型 - 函数(Function):为了能够重复引用相同的功能,减少代码的书写和维护的方便,js提供函数功能,由关键字
function
引导:
// 对象
var join = {
name: "卓音工作室",
part: '前端',
number: 20
}
// 数组
var arr = [2,'好好学习',join];
// 函数 定义之后记得调用
function myFunc(a, b) {
return a + b; // 返回a+b结果
}
console.log(myFunc(3,5));
3.数据类型转换typeof()
可以返回变量的6种数据类型:number、string、boolean、undefined、object、function
显示类型转换:
-
Number()
转换为数字类型 -
parseInt()
转换为int类型 -
parseFloat()
转换为浮点型 -
String()
转换为字符串类型 -
Boolean()
转换为布尔类型。0,'',NaN,null,undefined
转换成布尔型都默认为false,其他的为true. - 变量
.toString()
将变量转换为字符串类型(toString()无法转换null
和undefined
),对象则返回一个【表示对象】的【字符串】,数字则可返回该数字对应进制的字符串。
var tim = 100.11
console.log(typeof(tim));
console.log(Number(tim));
console.log(parseInt(tim));
console.log(parseFloat(tim));
console.log(String(tim));
console.log(Boolean(tim));
console.log(typeof(tim.toString()));
// 返回一个【表示对象】的【字符串】
//每一个对象都有一个 toString()方法。 默认的情况下,toString()方法被每一个对象继承。如果toString没有被定义的对象覆盖。toString返回 '[object type]' 其中type是对象的类型,type的值可以是Object,
join.toString()
console.log(join.toString());
// 返回该数字对应进制的字符串。
var num = 10
console.log(num.toString(2)) //10专为为2进制'1010'
隐式类型转换:
-
isNaN()
判断括号内是否为NaN,是数字返回false,不是数字返回true.
console.log(isNaN(tim)); // false
console.log(isNaN(join)); // true
// 运算过程中的隐式类型转换
var str = '12'
var a = 5
var b = a*str
console.log(b) //60
3.运算符
- 算数运算符 +、-、、/、%、++、- -、+=,-=,=,/=
- 比较运算符 和C语言相比,多了=== 和 !==
- 逻辑运算符 &&、||、!
1 == '1',true 不同类型先做类型转换,再判断
1 === '1',false 不做任何转换,直接判断
4.条件循环语句(和C语言一样)
- if( ){ }else if( ){ }else{ }、switch case
- for、while、do while
- break直接跳出循环、continue结束当前循环,进入下一循环
5.数组方法
-
.toString()
,将数组转化为字符串,将数组值(用逗号分割)的字符串
var arr = [1,2,3,4,5,6];
console.log(arr.toString());
-
.length
获取数组元素个数;不需要加() -
.pop()
(也叫弹出)是将数组中最后一个数给删除掉,并将删除的数返回; -
.push()
(在数组结尾处)向数组添加一个新的元素,并返回新元素的下表; -
.shift()
将数组中第一个元素移除数组,并返回移除的元素,并把所有其他元素“位移”到更低的索引。 -
.unshift()
向数组中第一个位置进行添加新的元素,会有返回值,返回值是新的数组的长度。(如果unshift()
没有添加新的数值,会返回原数组的长度)。 -
.sort()
方法对数组进行排序 -
.reverse()
方法反转数组中的元素。
不改变原数组的操作
-
.join()
,用法和toString()方法类似,将所有数组元素结合为一个字符串,只不过join可以规定分割符
console.log(arr.join()); //什么也不加结果同toString类似
console.log(arr.join(""));//这样会将逗号去掉,不以任何符号分割
console.log(arr.join("-"));
-
concat()
合并数组,通过合并(连接)现有数组来创建一个新数组 -
splice()
拼接数组,可用于向数组添加新项或删除元素,该方法有几项参数(开始拼接的位置,删除元素个数,拼接项1,拼接项2…)
- slice() 裁剪数组,方法中会有一些参数
(开始裁剪,结束位置)
,不限制剪裁位置就剪到最后。
6.对象
JavaScript的对象是一种无序的集合数据类型,它由若干键值对组成,属性由逗号分隔。
- 对象的创建
var people = { // 字面量形式创建
name: 'Amy',
age: 18,
sex: 'girl'
}
// 属性名与属性值书法方式与字面量有区别.
//对象名.属性名 = 属性值,每个属性用分号;结尾
var obj = new Object();
obj.name = 'LiMing';
obj.age = 20;
obj.sex = 'boy';
- 获取对象属性值:对象属性有两种寻址方式,
对象.属性名
、对象[“属性名”]
- 属性的增删:增加新属性,直接写新键值对
obj.key = value
,删除属性delete obj.key
- 遍历对象:
for...in
语句 对象中有几个属性,循环体就会执行几次,每次执行时,会将对象中的一个属性名赋值给变量
for(var item in people){
console.log('属性名:'+ item);
console.log('属性值:'+ people[item]);
}
- JS的常用内置对象:Math对象,Data日期对象
- window时间类对象:
定时器:window.setTimeout(方法,延时)
window.setTimeout(function(){
console.log("延时2秒后执行");
},2000);
计时器:window.setInterval(方法,时间间隔);
var count = ;
window.setInterval(function(){
console.log(“第”+count+"次执行");
count++;
},2000);
清除计时器:clearInterval(所要清除的计数器名字)
var count = 0;
var timer = setInterval(function(){
count ++;
if(count > 3){
clearInterval(timer);
}
console.log(count);
},2000);
7.函数以及构造函数
1) 函数的定义和调用
function 函数名(参数 1, 参数 2, 参数 3) {//函数命名要符合驼峰命名法
... //要执行的代码
}
函数名()//调用
2) 函数表达式
- 命名函数表达式
function fun() {
console.log('命名函数')
}
fun()
- 匿名函数表达式
var add = function () {
console.log('匿名函数')
}
add()
3) 参数和返回值
- 函数的形参不用指定参数的类型。
- 形参可以比实参多,实参也可以比形参多。
-
arguments
是JS的一个内置的类数组对象。当不确定有多少参数传递时,需要用arguments
来获取,储存了传递的所有实参,展示形式是一个伪数组,可以遍历。只能在函数体中使用。
function funArg(){
console.log(arguments,arguments[2])
}
funArg(2, "11",true);
arguments
是一个类数组对象,不是一个数组 ,除了length
属性和索引元素之外没有任何数组属性。例如,它没有 pop
方法。但是它可以被转换为一个真正的数组。
var args = [].slice.call(arguments); // 方式一
var args = Array.prototype.slice.call(arguments); // 方式二
// 下面是 es6 提供的语法
let args = Array.from(arguments) // 方式一
let args = [...arguments]; // 方式二
- 返回值:当 JavaScript 到达 return 语句,函数将停止执行。函数通常会计算出返回值,不加括号返回的是函数本身。
var x = multiply(7, 8);
function multiply(a, b) {
return a * b;
}
console.log(x);//x=56
console.log(mutiply)//
4) 构造函数
所谓”构造函数”,就是专门用来生成实例对象的函数。
- 构造函数首字母一般大写。
- 构造函数返回的是一个对象。
- 函数体内部使用了
this
关键字,代表了所要生成的对象实例。 - 生成对象的时候,必须使用
new
命令 - new命令的作用,就是执行构造函数,返回一个实例对象。
- new 就是
创造对象
的过程,也叫做实例化对象
的过程 - 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');
5) 作用域:变量和函数生效(能被访问)的区域。
全局变量:在函数外定义的变量,可以全局使用,使用不甚容易污染window的其他属性
局部变量:在函数内部定义的变量,只能在函数内部使用
8.预编译
js代码执行分成两个阶段:先进行预编译,再按顺序逐行执行代码,预编译有以下特点。
- 函数声明整体提升 无论函数调用和声明的位置是前是后,系统总会把函数声明移到调用前面。
- 变量声明提升 无论变量调用和声明的位置是前是后,系统总会把声明移到调用前,注意仅仅只是声明,变量赋值不会提升,所以值是undefined。
console.log(a)
var a = 100;
// 上面这段代码相当于
var a;
console.log(a) //undefined
a = 100;
三、事件
1.描述:
HTML事件是发生在HTML元素上的事情。当在 HTML 页面中使用 JS 时, JS 可以触发这些事件。事件可以是浏览器行为,也可以是用户行为。
2.事件三要素
- 事件源 :事件被触发的对象
- 事件类型 :事件触发机制,什么事件
- 事件处理程序: 通过一个函数赋值的方式完成
3.常见事件
事件 | 描述 |
onchange | HTML 元素改变 |
onclick | 用户点击 HTML 元素 |
onmouseover | 用户在一个HTML元素上移动鼠标 |
onmouseout | 用户从一个HTML元素上移开鼠标 |
onkeydown | 用户按下键盘按键 |
onload | 浏览器已完成页面的加载 |
4.执行事件的三个步骤
- 获取事件源
- 注册事件(绑定事件)
- 添加事件处理程序(采用函数赋值形式)
5.事件作用
事件可以用于处理表单验证,用户输入,用户行为及浏览器动作:
- 页面加载时触发事件
- 页面关闭时触发事件
- 用户点击按钮执行动作
- 验证用户输入内容的合法性
扩展:闭包、立即执行函数、原型、原型链、this、typescript……