前端三件套系例之JS——JavaScript基础、JavaScript基本数据类型、JavaScript函数

文章目录

1 JavaScript基础

1、JavaScript是什么

JavaScript（下文我们会用简称JS来代替）是脚本编程语言，JS语言开发的文件是以.js为后缀，通过在html文件中引入该js文件来控制html代码的交互功能以及前台数据处理的业务逻辑（js语言代码也可以直接写在html文件中），采用的ECMAScript语法，属于编程语言。
ECMAScript目前普遍使用的存在ES5与ES6两个版本，我们也会基于这两个版本来介绍JS这么应用的学习

2、JavaScript介绍

2-1 ECMAScript和JavaScript的关系

1996年11月，JavaScript的创造者–Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这门语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是1.0版。
该标准一开始就是针对JavaScript语言制定的，但是没有称其为JavaScript，有两个方面的原因。一是商标，JavaScript本身已被Netscape注册为商标。而是想体现这门语言的制定者是ECMA，而不是Netscape，这样有利于保证这门语言的开发性和中立性。
因此ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。

2-2 ECMAScript的历史

年份名称描述
1997ECMAScript 1第一个版本
1998ECMAScript 2版本变更
1999ECMAScript 3添加正则表达式添加try/catch
ECMAScript 4没有发布
2009ECMAScript 5添加”strict mode”严格模式添加JSON支持
2011ECMAScript 5.1版本变更
2015ECMAScript 6添加类和模块
2016ECMAScript 7增加指数运算符（**）增加Array.prototype.includes

注：ES6就是指ECMAScript 6。
尽管 ECMAScript 是一个重要的标准，但它并不是 JavaScript 唯一的部分，当然，也不是唯一被标准化的部分。实际上，一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：

  • 核心（ECMAScript）
  • 文档对象模型（DOM） Document object model (整合js，css，html)
  • 浏览器对象模型（BOM） Broswer object model（整合js和浏览器）

简单地说，ECMAScript 描述了JavaScript语言本身的相关内容。
JavaScript 是脚本语言JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习。

3、JS代码书写位置

JS属于脚本(可以以代码片段的方式内嵌到其他语言中)编程语言，可以内嵌到html代码中，但是可以根据实际情况书写在不同的位置，放在不同位置有不同的专业叫法，可以分为行间式、内联式和外联式三种。

3-1 行间式

JS代码书写在标签的事件全局属性中，采用的是JS编程语言的语法

<!-- 关键代码 -->
<!-- 给div标签添加点击事件的交互逻辑：弹出文本提示框 -->
<div onclick="alert('点击我完成页面交互')">点我</div>

3-2 内联式

JS代码书写在script标签中，script标签可以出现在页面中的任意位置，建议放在body标签的最后(html代码是自上而下进行解析加载，放在body标签的最下方，会保证页面所有标签都加载完毕，html再去加载js文件，那么js脚步文件就会更好的控制页面标签的人机交互了)，采用的是JS编程语言的语法

<!-- 关键代码 -->
<!-- 页面被加载打开时，就会触发事件的交互逻辑：弹出文本提示框 -->
<body>
    <!-- body标签中的所有子标签位置 -->
    
    <!-- script标签出现在body标签的最下方 -->
    <script>
    	alert('该页面被加载！')
    </script>
</body>

3-3 外联式

JS代码书在外部js文件中，在html页面中用script标签引入js文件（建议在body标签最下方引入，理由同上）

  • js文件夹下的my.js
alert('外联式js文件弹出框')
  • 根目录下的first.html
<!-- 关键代码 -->
<!-- 页面被加载打开时，就会触发事件的交互逻辑：弹出文本提示框 -->
<body>
    <!-- body标签中的所有子标签位置 -->
    
    <!-- script标签出现在body标签的最下方 -->
    <script src="js/my.js">
    	/* 不要在此写JS代码，原因是用来引入外部js文件的script标签，标签内部书写的JS代码不在起作用 */
    </script>
</body>
  • 根目录下的second.html
<!-- 关键代码 -->
<!-- 页面被加载打开时，就会触发事件的交互逻辑：弹出文本提示框 -->
<body>
    <!-- body标签中的所有子标签位置 -->
    
    <!-- script标签出现在body标签的最下方 -->
    <script src="js/my.js">
    	/* 不要在此写JS代码，原因是用来引入外部js文件的script标签，标签内部书写的JS代码不在起作用 */
    </script>
</body>

4 JavaScript语言规范

4-1 注释（注释是代码之母）

// 这是单行注释

/*
这是
多行注释
*/

4-2 结束符

JavaScript中的语句要以分号（;）为结束符。

5、总结

行间式控制交互最直接，但是交互逻辑多了直接导致页面可读性变差，且交互逻辑相同的标签样式也需要各自设置，复用性差，不建议使用；
内联式可以同时为多个标签提供交互逻辑（课程后面会详细介绍），学习阶段代码量不大的情况下，也不需要分文件处理的，这时候建议使用内联式；
外联式是分文件管理不同的页面存在的相同与不同的数据处理的业务逻辑与人机交互，可以极大提高开发效率，项目开发时一定要采用外联式来处理JS代码。
通过上面的介绍，大家很清楚JS是一门脚本编程语言，那么我们一定先要了解一下这门编程语言的基础语法，才可以慢慢的展开学。

2 JavaScript基本数据类型

1、变量的定义

JS中定义变量，不同于Python，我们需要像Python定义函数那样，也需要用特定的关键词来定义变量：
ES5语法，我们采用var关键词定义变量，并且没有常量的概念
ES6语法，我们采用let关键词定义变量，用const关键词定义常量
注：我们不需要像Python那样切换解释器版本来区别到底该书写什么版本语法的代码，在一个JS文件中我们可以同时书写两种语法的JS代码，浏览器都可以自动帮我们解析并运行。

// ES5定义变量：var是关键词、num是变量名、=为赋值符、10为变量值、;为JS语言语句的结束标识符
var num = 10;

// ES6定义变量
let count = 100;

const PI = 3.14;

# var与let的区别
n = 10
for n in range(5):
  print(n)
print(n)  
# var 5		let 10

"""
var在for循环里面定义也会影响到全局
let在局部定义只会在局部生效
"""

2、变量的命名规范

/*
1. 由字母，数字，_，$组成，不能以数字开头（可以包含中文字符）
2. 区分大小写
3. 不能出现关键字及保留字
4. 推荐使用下划线 
*/

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 值类型

// 数字类型：number
var num = 10;
const PI = 3.14;
console.log(typeof(num), num);  // 结果：number  10
parseInt("123")  // 返回123
parseInt("ABC")  // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
parseFloat("123.456")  // 返回123.456

// 字符串类型：string
var s1 = "双引号可以表示字符串";
var s2 = '单引号可以表示字符串';
console.log(typeof(s1), s1);  // 结果：string  双引号可以表示字符串
// 模版字符串,可以字符串拼接
// 模版字符串除了可以定义多行文本之外还可以实现格式化字符串操作
// 书写${} 会自动去前面找大括号里面的变量名对应的值 如果没有定义直接报错
var s3 = `
asdkajsd
sdjkladj
asdjlajdkl
`

// 布尔类型：boolean
var b1 = true;
var b2 = false;
console.log(typeof(b1), b1);  // 结果：string  双引号可以表示字符串

// 未定义类型：undefined
var u1;
var u2 = undefined;
console.log(typeof(u1), u1);  // 结果：undefined  undefined

/*
null
	表示值为空 一般都是指定或者清空一个变量时使用
		name = 'jason'
		name = null
undefined
	表示声明了一个变量 但是没有做初始化操作(没有给值)
	函数没有指定返回值的时候 返回的也是undefined
	
*/

3-2 引用类型

// 函数类型：function
function fn1() {}
var fn2 = function() {};
console.log(typeof(fn1), fn1);  // 结果：function  ƒ fn1() {}

// 对象类型：object
var obj1 = {}
console.log(typeof(obj1), obj1);  // 结果：function  {}

// Array对象类型：
var arr1 = [1, 2, 3, 4, 5]
console.log(typeof(arr1), arr1);  // 结果：object  (5) [1, 2, 3, 4, 5]

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 : 结果2;
// 语法规则：条件表达式成立，将结果1赋值给结果，反正赋值结果2

// 案例：
var weather = prompt("天气(晴|雨)");  // 文本输入弹出框
var res = tq == '晴' ? "今天天气挺好" : "请假回家收衣服";
console.log(res);  // 今天天气挺好

5 流程控制

5-1 if判断


var age = 28;
# if(条件){条件成立之后指向的代码块}
if (age>18){
  console.log('来啊 来啊')
}
# if-else
if (age>18){
  console.log('来啊 来啊')
}else{
  console.log('没钱 滚蛋')
}
# if-else if else
if (age<18){
  console.log("培养一下")
}else if(age<24){
  console.log('小姐姐你好 我是你的粉丝')
}else{
  console.log('你是个好人')
}
"""
在js中代码是没有缩进的 只不过我们处于python书写习惯人为的加上了而已
()条件
{}代码块
"""

5-2 switch

# switch语法
"""
提前列举好可能出现的条件和解决方式
"""
var num = 2;
switch(num){
  case 0:
  	console.log('喝酒');
  	break;  # 不加break 匹配到一个之后 就一直往下执行
  case 1:
  	console.log('唱歌');
  	break;
  case 2:
  	console.log('洗脚');
  	break;
  case 3:
  	console.log('按摩');
  	break;
  case 4:
  	console.log('营养快线');
  	break;
  case 5:
  	console.log('老板慢走 欢迎下次光临');
  	break;
  default:
  	console.log('条件都没有匹配上 默认走的流程')
}

5-3 for 循环

# for循环
# 打印0-9数字
for(let i=0;i<10;i++){
  console.log(i)
}
# 题目1  循环打印出数组里面的每一个元素
var l1 = [111,222,333,444,555,666]
for(let i=0;i<l1.length;i++){
  console.log(l1[i])
}

5-4 while循环

# while循环
var i = 0
while(i<100){
  console.log(i)
  i++;
}

5-5 三元运算符

# 三元运算符
# python中三元运算符 res = 1 if 1>2 else 3
# JS中三元运算  res = 1>2?1:3 
条件成立取问好后面的1 不成立取冒号后面的3
var res = 2>5?8:10 # 10
var res = 2>5?8:(8>5?666:444)  # 666
"""
三元运算符不要写的过于复杂 
"""

3 JavaScript函数

1-1 声明函数的方式

  • function 关键字
  • 匿名函数方式(表达式方式)
  • Function 构造函数方式

1-2 参数问题

  • 形参和实参数量问题
  • 可选形参(参数默认值)
  • 可变长的实参列表:实参对象 aruguments

1-3 回调函数

一个函数就可以接收另一个函数作为参数，这种函数就称之为回调函数(高阶函数)

function add(x, y, f) {
    return f(x) + f(y);
}
add(-5, 6, Math.abs)

1-4 递归函数

函数内部调用自己就是递归函数，

//用递归 实现阶乘
function multiply(n) {
    if (n == 1) {
        return 1
    }
    return n * multiply(n - 1)
}

1-5 自调函数

函数生声明完 直接调用

(function(){
    console.log('ok')
})()

1-6 闭包函数

当一个函数返回了一个函数后，其内部的局部变量还被新函数引用，形成闭包

function count() {
    var arr = [];
    for (var i=1; i<=3; i++) {
        arr.push((function (n) {
            return function () {
                return n * n;
            }
        })(i));
    }
    return arr;
}

var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];

f1(); // 1
f2(); // 4
f3(); // 9

2、JavaScript 作用域

2-1 局部作用域

函数中使用定义的变量就是局部变量，只能在本函数中使用

2-2 全局作用域

在，函数外面，定义的变量是全局变量。哪都可以用
变量提升

var a = 100
function demo(){
    console.log(a)
    var a = 200
}

2-3 作用域链

函数嵌套函数会形成作用域链

function demo(){
    function fn(){
        function fn1() {

        }
    }
}

2-4 块状作用域(ES6)

使用let关键字声明的变量会具有块状作用域

for (let i = 0; i < 10; i ++) {

}

console.log(i) //变量不存在 Uncaught ReferenceError: i is not defined

3 函数使用案例

3-1 基本使用

# 在python定义函数需要用到关键字def
# 在js中定义函数需要用到关键字function

# 格式
function 函数名(形参1,形参2,形参3...){函数体代码}

# 无参函数
function func1(){
  console.log('hello world')
}
func1()  # 调用 加括调用 跟python是一样的

# 有参函数
function func2(a,b){
  console.log(a,b)
}
func2(1,2)

func2(1,2,3,4,5,6,7,8,9)  # 多了没关系 只要对应的数据
VM3610:2 1 2
undefined

func2(1)  # 少了也没关系
VM3610:2 1 undefined
  
# 关键字arguments
function func2(a,b){
  console.log(arguments)  # 能够获取到函数接受到的所有的参数
  console.log(a,b)
}

function func2(a,b){
  if(arguments.length<2){
    console.log('传少了')
  }else if (arguments.length>2){
    console.log('传多了')
  }else{
    console.log('正常执行')
  }
}


# 函数的返回值  使用的也是关键字return
function index(){
  return 666
}
function index(){
  return 666,777,888,999
}
res = index();
999
res
999  # 只能拿到最后一个

function index(){
  return [666,777,888,999]
}
# js不支持解压赋值


# 匿名函数  就是没有名字
function(){
  console.log('哈哈哈')
}
var res = function(){
  console.log('哈哈哈')
}

# 箭头函数(要了解一下)  主要用来处理简单的业务逻辑 类似于python中的匿名函数
var func1 = v => v;  """箭头左边的是形参 右边的是返回值"""
等价于
var func1 = function(v){
  return v
}

var func2 = (arg1,arg2) => arg1+arg2
等价于
var func1 = function(arg1,arg2){
  return arg1+arg2
}

3-2 作用域

# 跟python查找变量的顺序一致
var city = "BeiJing";
function f() {
  var city = "ShangHai";
  function inner(){
    var city = "ShenZhen";
    console.log(city);
  }
  inner();
}

f();  //输出结果是？


var city = "BeiJing";
function Bar() {
  console.log(city);
}
function f() {
  var city = "ShangHai";
  return Bar;
}
var ret = f();
ret();  // 打印结果是？


var city = "BeiJing";
function f(){
    var city = "ShangHai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var ret = f();
ret();
posted @ 2022-03-10 20:17  喝茶看猴戏  阅读(27)  评论(0)    收藏  举报  来源