第一章
-
JavaScript简介
JavaScript是基于对象和事件驱动，具有安全性能的脚本，通过潜入或导入到标准的HTML文档中实现。 -
功能
客户端数据计算 客户端表单合法性验证
浏览器对象的调用 浏览器时间触发
网页特殊显示效果的制作不适合大型应用程序、图像多媒体处理、网络实时通讯。
-
特点
脚本语言、跨平台、支持面向对象 -
发展
javas的用途不仅限于浏览器，Node.js的出现使得开发人员能够以在服务器端编写JavaScript代码。 -
开发工具
普通的编辑器：
VS Code、Sublime 、Text Atom、记事本调试工具：
浏览器的开发者工具，F12集成开发环境：
IntellijIDEA、WebStorm、HBuilder、Eclipse、 Dreamweaver -
引入方式
嵌入式：使用标签包裹JavaScript代码，直接编写到HTML文件中。
<script>
JavaScript语句
<script>
外链式：指将JavaScript代码保存到一个单独的文件中，通常使用"js"作为文件的扩展名，然后使用
HTML文件
<script src="js/test.js"></script>
js/test.js文件
alert('Hello');
相对路径：js/test.js 、…/js/test.js
绝对路径：/js/test.js、file:///C:/js/test.js24
URL地址：http://js.test/file.js、
若自动使用当前页面协议，可写为//js.test/file.js
-
JavaScript基本语法
大小写敏感
忽略空格、换行和制表符
每个语句以;结束，语句块用{…}
注释方式：//：多行注释
/…/：把多行字符包裹起来，把一大块视为一个注释 -
数据与运算比较数字大小
. JavaScript支持JavaScript支持加（+）减（-）乘（*）除（/）四则运算。
小括号可以改变优先顺序。
alert(220 + 230);// 输出结果：450
alert(2 * 3 + 25 / 5 - 1);// 输出结果：10
alert(2 * (3 + 25) / 5 -1);// 输出结果：10.2
比较的结果是true或false，这是布尔类型的值，表示真和假
alert(22 > 33);// 输出结果：false
alert(22 < 33);// 输出结果：true
alert(22 == 33);// 输出结果：false
alert(22 == 22);// 输出结果：true
-
数据与运算比较字符串
在JavaScript中，使用单引号或双引号包裹的数据是字符串。使用"=="运算符可以比较两个字符串是否相同
alert('Hello'); // 单引号字符串
alert("Hello"); // 双引号字符串
alert('22' == '22');// 输出结果：true
alert('22' == '33');// 输出结果：false
"+"运算符的操作数只要有一个是字符串，就表示字符串拼接。
"+"运算符的操作数全部为数字时，表示相加。
alert('220' + '230'); // 输出结果：220230
alert('220 + 230 = ' + 220 + 230); // 输出结果：220 + 230 = 220230
alert('220 + 230 = ' + (220 + 230)); // 输出结果：220 + 230 = 450
- 数据与运算-比较结果
if…else语句用于根据比较的结果，执行不同的代码。
if (22 > 33) {
alert(true); // 判断成立时执行此语句
} else {
alert(false); // 判断不成立时执行此语句}
}
- 数据与运算——使用变量保存数据
场景：当一个数据需要多次使用时，可以利用变量保存。
概念：变量是保存数据的容器，每一个变量都有唯一的名称。
定义：利用var关键字定义.
var num1 = 22; vartemp = num1;
var num2 = 33; num1 = num2
alert(num1 + num2); num2 = temp;
alert(num1 - num2); alert('num1 = ' + num1)
alert('num2 = ' + num2);
-
函数
在Javascript中，函数就是对象，是一等公民。作用：
被赋值给一个变量、被赋值为对象的属性、
被赋值为对象的属性、作为函数的结果被返回、
用字面量来创建由于函数具备给其它数据类型平等的地位，整个函数也会像变量声明一样，具备函数名提升的特性，被提升到代码的头部。内置函数：
parseFloat()用于返回解析字符串后的浮点数。
isNaN()判断给定参数是否为NaN，判断结果为是，返回true，否则返回false。
parseInt()用于返回解析字符串后的整数值。
console.log(parseFloat('7.26e-2')); // 返回解析后的浮点数：0.0726
console.log(isNaN(' ')); // 判断是否是NaN：false
console.log(parseInt('15.99')); // 返回解析后的整数值：15
函数定义：
函数的定义由以下4部分组成：关键字function、函数名、参数和函数体。
定义命名函数：
function funcName(参数列表){
statements
[return [expr]];
}
function sayHi(name, message){
alert("hello" + name + ", " + message);
}
参数设置：
无参函数：适用于不需要提供任何数据，即可完成指定功能的情况。
有参函数：适用于开发时函数体内的操作需要用户传递数据的情况。
形参：形式参数，具有特定的含义，在定义有参函数时设置的参数。
实参：实际参数，也就是具体的值，在函数调用时传递的参数
function maxNum(a, b) {
a = parseInt(a);
b = parseInt(b);
return a >= b ? a : b;
}
获取函数调用时传递的所有实参：适用于开发时函数体形参不确定的情况。
实现方式：利用arguments对象，在函数体内可获取函数调用时传递的实参。
其他操作：length属性可获取实参的总数，具体实参值可利用数组遍历方式。
函数调用
直接调用：函数名(实参值)
sayHi("南工院", "新学期开学了");
在表达式中调用：
这种方式适合有返回值的函数，返回值作为表达式的一部分参与运算，有时还会和（alert、document）等语句配合输出
function add(a,//b){
retrun a+b;
}
var sum = add(4,5); //此时函数作为表达式一部分
alert(sum); //9
alert(add(4,5); //此时函数作为输出语句一部分
在事件中调用：
注意点：
return 语句不是函数必须的，但任何函数在任何时候都可以通过return语句+ 返回的值，实现返回。
若在一个文件中，定义函数名字相同，会使用最后定义的函数
函数声明
概念：概念：使用function关键字声明函数。
function add(num1, num2) {
return num1 + num2;
};
console.log(add(1, 2));
sum();
function sum(num1, num2) {
return num1 + num2;
};
函数表达式
概念：函数表达式指的是将声明的函数赋值给一个变量，通过变量完成函数的调用和参数的传递，是JavaScript中另一种实现自定义函数的方式。
varfn = function sum(num1, num2) {
return num1 + num2;
};
fn ()；
sum();
function sum(num1, num2) {
return num1 + num2;
};
Function构造函数
第3种声明函数的方式是Function构造函数在这里插入代码片
var add = new Function(
'num1',
'num2',
'return num1 + num2');
console.log(add(1, 2));
函数声明和函数表达式
除了以上定义和调用形式的区别之外，两者最本质的区别是：
JavaScript引擎在解析JavaScript代码时会"函数声明提升"当前执行环境(作用域)上的函数声明;函数表达式必须等到JavaScript引擎执行到他所在行时，才会解析。
函数表达式后面可以加括号立即调用该函数，函数声明不可以，只能以fnName() 形式调用。
console.log(add(1, 2));
function add(num1, num2) {
return num1 + num2;
};
匿名函数
概念：匿名函数指的是没有函数名称的函数。
作用：可以有效的避免全局变量的污染以及函数名的冲突问题。
说明：既是函数表达式的另一种表示形式，又可通过函数声明的方式实现调用。
var fn = function (num1, num2) {
return num1 + num2;
};//; 函数表达式中省略函数名
fn(1, 2);
(function (num1, num2) {
return num1 + num2;})(2, 3);
//自调用方式
document.body.onclick = function () {
alert('Hi, everybody!');
}//事件处理
回调函数
概念：所谓回调函数指的就是一个函数A作为参数传递给一个函数B，然后在B的函数体内调用函数A。此时，我们称函数A为回调函数。
在JavaScript中还为数组提供了很多利用回调函数实现具体功能的方法。
| 方法名 | 功能 |
|---|---|
| find() | 返回数组中满足回调函数的第一个元素的值，否则返回undefined |
| every() | 测试数组的所有元素是否都通过了回调函数的测试 |
| some() | 测试数组中的某些元素是否通过由回调函数实现的测试 |
| forEach() | 对数组的每个元素执行一次提供的函数 |
| map() | 创建一个新数组，其结果是该数组中的每个元素都调用一次提供的回调函数后返回的结果 |
| reduce() | 对累加器和数组中的每个元素（从左到右）应用一个函数，将其减少为单个值 |
| reduceRight() | 接收一个函数作为累加器（accumulator）和数组的每个值（从右到左）将其减少为单个值 |
嵌套函数
概念：在一个函数内部存在另一个函数的声明。
特点：内层函数只能在外层函数作用域内执行，在内层函数执行的过程中，若需要引入某个变量，首先会在当前作用域中寻找，若未找到，则继续向上一层级的作用域中寻找，直到全局作用域，我们称这种链式的查询关系为作用域链。
闭包函数
概念：在一个函数内部存在另一个函数的声明。
特点：内层函数只能在外层函数作用域内执行，在内层函数执行的过程中，若需要引入某个变量，首先会在当前作用域中寻找，若未找到，则继续向上一层级的作用域中寻找，直到全局作用域，我们称这种链式的查询关系为作用域链。
闭包函数
在JavaScript中，内嵌函数可以访问定义在外层函数中的所有变量和函数，并包括其外层函数能访问的所有变量和函数。但是在函数外部则不能访问函数的内部变量和嵌套函数。此时就可以使用"闭包"来实现。所谓"闭包"指的就是有权访问另一函数作用域内变量（局部变量）的函数。它最主要的用途是以下两点：可以在函数外部读取函数内部的变量。可以让变量的值始终保持在内存中。
闭包函数的实现
常见创建方式：就是在一个函数内部创建另一个函数，通过另一个函数访问这个函数的局部变量。
-
对象
window对象
window对象是JavaScript与浏览器之间交互的主要接入点。
提供了用于JavaScript脚本控制浏览器的一些接口。document对象
document对象是window对象的属性之一，主要用于与网页文档进行交互。String对象
在代码中直接定义的字符串，就可以作为对象来使用。
String对象用于对字符串进行处理。自定义对象
除了直接使用JavaScript中的内置对象，用户也可以自己创建一个自定义对象。
//window对象//
window.console;
window.document;
window.alert('test');
window.prompt('test'）
window.console.log('test');
window.document.write('test');
//document对象//
<body>
<div id="test">Hello</div>
<script>
vartest = document.getElementById('test');
alert(test.innerHTML)
</script>
</body>
//String对象//
varstr= 'apple'; // 定义一个字符串
alert(str.length); // 获取字符串长度，输出结果：5
alert(str.toUpperCase()); // 获取转换大写后的结果，输出结果：APPLE
alert('aa'.toUpperCase()); // 直接调用字符串的成员方法，输出结果：AA
//自定义对象//
// 创建对象
varstu= {}; // 创建一个名称为stu的空对象
// 添加属性
stu.name = '小明'; // 为stu对象添加name属性stu.gender= '男';// 为stu对象添加gender属性
stu.age= 18; // 为stu对象添加age属性
// 访问属性
alert(stu.name); // 访问stu对象的name属性，输出结果：小明
// 添加方法
stu.introduce= function () {
return '我叫' + this.name + '，今年' + this.age+ '岁。';
};
// 调用方法
alert(stu.introduce()); // 输出结果：我叫小明，今年18岁。
- 流程控制
if条件语句：
if(条件) {
//JavaScript代码;
}else {
//JavaScript代码;
}
switch语句：
switch()语句可以使用任何数据类型，如：字符串、对象等。
每个case的值不一定是常量，可以是变量，甚至是表达式。
switch语句在比较值时使用的是恒等操作符。
switch (表达式) {
case value1 :
语句1;
break;
case value2 :
语句2;
break;
...
default :
语句3;
}
循环结构：
for循环
while循环
do…while循环
for(初始化; 条件; 增量){
JavaScript代码;
}
while(条件){
JavaScript代码;
}
do {
JavaScript代码;
} while(条件);
let关键字：
通过let定义的变量相比var来说，有一个更加清晰的作用范围，方便了变量的维护与控制。
通过let定义的变量相比var来说，有一个更加清晰的作用范围，方便了变量的维护与控制。
// let关键字
for (let i= 0; i < 3; ++i) {
}
// 输出结果：i is not definedconsole.log(i);
// var关键字
for (var i = 0; i < 3; ++i) {
}
// 输出结果为：3console.log(i);
for…in语句:
for…in语句针对对象的每个属性或数组的每个元素，执行一个或多个语句。
for(variable in [object|array]){
statement;
}
跳转语句
<script>
for(vari=0;i<=5;i++){
if(i==3){
break;
}
document.write("i是："+i +"<br/>");
}
</script>
- 数组
基本概念：由一个或多个数组元素组成的，各元素之间使用逗号","分割。每个数组元素由"索引下标"和"值"构成。根据维数划分为一维数组、二维数组、三维数组等多维数组。
创建数组：
var arr1=new Array('1','2','3');
var arr2=['1','2','3'];
JavaScript中不论何种方式指定数组长度后，并不影响继续为数组添加元素，同时数组的length属性值会发生相应的改变。
访问数组：数组名[下标]，如 arr[0];
遍历数组的方式：
for;
for in;
for of;
var arr= [1, 2, 3];
for (var value of arr ) {
console.log(value);
}
//变量value：表示每次遍历时对应的数组元素的值。变量arr：表示待遍历的数组。结果：在控制台中依次输出1、2和3。
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
