前端之JavaScript

前端之JavaScript
墨颜丶JavaScript基础
1、JavaScript是什么
JavaScript(下文我们会用简称JS来代替)是脚本编程语言,JS语言开发的文件是以.js为后缀,通过在html文件中引入该js文件来控制html代码的交互功能以及前台数据处理的业务逻辑(js语言代码也可以直接写在html文件中),采用的ECMAScript语法,属于编程语言。
ECMAScript目前普遍使用的存在ES5与ES6两个版本,我们也会基于这两个版本来介绍JS这么应用的学习
2、JavaScript如何学习
学习方向:从JS代码书写位置、JS基础语法、JS选择器和JS页面操作四部分进行学习
学习目的:完成页面标签与用户的人机交互及前台数据处理的业务逻辑
3、JS代码书写位置
JS属于脚本(可以以代码片段的方式内嵌到其他语言中)编程语言,可以内嵌到html代码中,但是可以根据实际情况书写在不同的位置,放在不同位置有不同的专业叫法,可以分为行间式、内联式和外联式三种。
3-1 行间式
JS代码书写在标签的事件全局属性中,采用的是JS编程语言的语法
1 | <!-- 关键代码 --> |
3-2 内联式
JS代码书写在script标签中,script标签可以出现在页面中的任意位置,建议放在body标签的最后(html代码是自上而下进行解析加载,放在body标签的最下方,会保证页面所有标签都加载完毕,html再去加载js文件,那么js脚步文件就会更好的控制页面标签的人机交互了),采用的是JS编程语言的语法
1 | <!-- 关键代码 --> |
3-3 外联式
JS代码书在外部js文件中,在html页面中用script标签引入js文件(建议在body标签最下方引入,理由同上)
- js文件夹下的my.js
1 | alert('外联式js文件弹出框') |
- 根目录下的first.html
1 | <!-- 关键代码 --> |
- 根目录下的second.html
1 | <!-- 关键代码 --> |
4、总结
行间式控制交互最直接,但是交互逻辑多了直接导致页面可读性变差,且交互逻辑相同的标签样式也需要各自设置,复用性差,不建议使用;
内联式可以同时为多个标签提供交互逻辑(课程后面会详细介绍),学习阶段代码量不大的情况下,也不需要分文件处理的,这时候建议使用内联式;
外联式是分文件管理不同的页面存在的相同与不同的数据处理的业务逻辑与人机交互,可以极大提高开发效率,项目开发时一定要采用外联式来处理JS代码。
通过上面的介绍,大家很清楚JS是一门脚本编程语言,那么我们一定先要了解一下这门编程语言的基础语法,才可以慢慢的展开学。
JavaScript基础数据类型
1、变量的定义
JS中定义变量,不同于Python,我们需要像Python定义函数那样,也需要用特定的关键词来定义变量:
ES5语法,我们采用var关键词定义变量,并且没有常量的概念
ES6语法,我们采用let关键词定义变量,用const关键词定义常量
注:我们不需要像Python那样切换解释器版本来区别到底该书写什么版本语法的代码,在一个JS文件中我们可以同时书写两种语法的JS代码,浏览器都可以自动帮我们解析并运行。
1 | // ES5定义变量:var是关键词、num是变量名、=为赋值符、10为变量值、;为JS语言语句的结束标识符 |
2、变量的命名规范
1 | /* |
abstract | arguments | boolean | break | byte |
case | catch | char | class* | const |
continue | debugger | default | delete | do |
double | else | enum* | eval | export* |
extends* | false | final | finally | float |
for | function | goto | if | implements |
import* | in | instanceof | int | interface |
let | long | native | new | null |
package | private | protected | public | return |
short | static | super* | switch | synchronized |
this | throw | throws | transient | true |
try | typeof | var | void | volatile |
while | with | yield |
3、基本数据类型
JS语言中基本数据类型分值类型与引用类型两部分。
3-1 值类型
1 | // 数字类型:number |
字符串常用方法:拼接字符串一般使用“+”
方法 | 说明 |
---|---|
.length | 返回长度 |
.trim() | 移除空白 |
.trimLeft() | 移除左边的空白 |
.trimRight() | 移除右边的空白 |
.charAt(n) | 返回第n个字符 |
.concat(value, …) | 拼接 |
.indexOf(substring, start) | 子序列位置 |
.substring(from, to) | 根据索引获取子序列 |
.slice(start, end) | 切片 |
.toLowerCase() | 小写 |
.toUpperCase() | 大写 |
.split(delimiter, limit) | 分割 |
3-2 引用类型
1 | // 函数类型:function |
4、运算符
4-1 算数运算符
前提:n = 5
运算符 | 描述 | 例子 | x结果 | n结果 |
---|---|---|---|---|
+ | 加法 | x=n+2 | 7 | 5 |
- | 减法 | x=n-2 | 3 | 5 |
* | 乘法 | x=n*2 | 10 | 5 |
/ | 除法 | x=n/2 | 2.5 | 5 |
% | 取模(余数) | x=n/2 | 1 | 5 |
++ | 自增 | x=++n | 6 | 6 |
x=n++ | 5 | 6 | ||
– | 自减 | x=–n | 4 | 4 |
x=n– | 5 | 4 |
4-2 赋值运算符
前提:x=5,y=5
运算符 | 例子 | 等同于 | 运算结果 |
---|---|---|---|
= | x=y | 5 | |
+= | x+=y | x=x+y | 10 |
-= | x-=y | x=x-y | 0 |
*= | x*=y | x=x*y | 25 |
/= | x/=y | x=x/y | 1 |
%= | x%=y | x=x%y | 0 |
4-3 比较运算符
前提:x=5
运算符 | 描述 | 比较 | 结果 |
---|---|---|---|
== | 等于 | x==“5” | true |
=== | 绝对等于 | x===“5” | false |
!= | 不等于 | x!=“5” | fales |
!== | 不绝对等于 | x!==“5” | true |
> | 大于 | x>5 | false |
< | 小于 | x<5 | false |
>= | 大于等于 | x>=5 | true |
<= | 小于等于 | x<=5 | true |
4-4 逻辑运算符
前提:n=5
运算符 | 描述 | 例子 | 结果 |
---|---|---|---|
&& | 与 | x=n>10&&++n | x=false,n=5(短路) |
|| | 或 | x=n<10||n– | x=true,n=5(短路) |
! | 非 | x=!n | x=false,x=5 |
4-5 三目运算符
1 | // 结果 = 条件表达式 ? 结果1 : 结果2; |
流程控制
if-else
1 | var a = 10; |
if-else if-else
1 | var a = 10; |
switch
1 | var day = new Date().getDay(); |
switch中的case子句通常都会加break语句,否则程序会继续执行后续case中的语句。
for
1 | for (var i=0;i<10;i++) { |
while
1 | var i = 0; |
三元运算
1 | var a = 1; |
函数
函数定义
JavaScript中的函数和Python中的非常类似,只是定义方式有点区别。
1 | // 普通函数定义 |
补充:
ES6中允许使用“箭头”(=>)定义函数。
1 | var f = v => v; |
如果箭头函数不需要参数或需要多个参数,就是用圆括号代表参数部分:
1 | var f = () => 5; |
函数中的arguments参数
1 | function add(a,b){ |
输出:
1 | 3 |
注意:
函数只能返回一个值,如果要返回多个值,只能将其放在数组或对象中返回。
函数的全局变量和局部变量
局部变量:
在JavaScript函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它(该变量的作用域是函数内部)。只要函数运行完毕,本地变量就会被删除。
全局变量:
在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。
变量生存周期:
JavaScript变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
作用域
首先在函数内部查找变量,找不到则到外层函数查找,逐步找到最外层。
几个例子:
- eg
1 | var city = "BeiJing"; |
- eg
1 | var city = "BeiJing"; |
3.闭包
1 | var city = "BeiJing"; |
词法分析(尝试理解)
JavaScript中在调用函数的那一瞬间,会先进行词法分析。
词法分析的过程:
当函数调用的前一瞬间,会先形成一个激活对象:Avtive Object(AO),并会分析以下3个方面:
1:函数参数,如果有,则将此参数赋值给AO,且值为undefined。如果没有,则不做任何操作。
2:函数局部变量,如果AO上有同名的值,则不做任何操作。如果没有,则将此变量赋值给AO,并且值为undefined。
3:函数声明,如果AO上有,则会将AO上的对象覆盖。如果没有,则不做任何操作。
函数内部无论是使用参数还是使用局部变量都到AO上找。
看两个例子:
1 | var age = 18; |
第二题:
1 | var age = 18; |
1 | 词法分析过程: |
内置对象和方法
JavaScript中的所有事物都是对象:字符串、数字、数组、日期,等等。在JavaScript中,对象是拥有属性和方法的数据。
我们在学习基本数据类型的时候已经带大家了解了,JavaScript中的Number对象、String对象、Array对象等。
注意var s1 = "abc"和var s2 = new String(“abc”)的区别:typeof s1 --> string而 typeof s2 --> Object
自定义对象
JavaScript的对象(Object)本质上是键值对的集合(Hash结构),但是只能用字符串作为键。
1 | var a = {"name": "Alex", "age": 18}; |
遍历对象中的内容:
1 | var a = {"name": "Alex", "age": 18}; |
创建对象:
1 | var person=new Object(); // 创建一个person对象 |
注意:
ES6中提供了Map数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当做键。
也就是说,Object结构提供了“字符串–值”的对应,Map结构提供了“值–值”的对应,是一种更完善的Hash结构实现。
1 | var m = new Map(); |
扩展:
1 | // 父类构造函数 |
Date对象
创建Date对象
1 | //方法1:不指定参数 |
Date对象的方法:
1 | var d = new Date(); |
练习:
编写代码,将当前日期按“2017-12-27 11:11 星期三”格式输出。
详细Date对象方法:点我
JSON对象
1 | var str1 = '{"name": "Alex", "age": 18}'; |
RegExp对象
1 | //RegExp对象 |
Math对象
1 | abs(x) 返回数的绝对值。 |