文章目录

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的历史

年份 名称 描述
1997 ECMAScript 1 第一个版本
1998 ECMAScript 2 版本变更
1999 ECMAScript 3 添加正则表达式添加try/catch
ECMAScript 4 没有发布
2009 ECMAScript 5 添加”strict mode”严格模式添加JSON支持
2011 ECMAScript 5.1 版本变更
2015 ECMAScript 6 添加类和模块
2016 ECMAScript 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();

前端三件套系例之JS——JavaScript基础、JavaScript基本数据类型、JavaScript函数的更多相关文章

  1. JavaScript 基础 (变量声明, 数据类型, 控制语句)

    创建: 2017/09/16 更新: 2017/09/24 更改标题 [JavaScript 概要]-> [JavaScript 基础] 完成: 2017/09/25 更新: 2017/10/0 ...

  2. JavaScript 基础类型，数据类型

    1.基础类型:undefined,null,Boolean,Number,String,Symbol Undefined类型:一个没有被赋值的变量会有个默认值undefined; Null类型:nul ...

  3. 前端知识体系：JavaScript基础-作用域和闭包-JavaScript的作用域和作用域链

    JavaScript的作用域和作用域链 作用域: 变量的作用域无非两种:全局作用域和局部作用域 全局作用域: 最外层函数定义的变量拥有全局作用域.即对任何内部函数来说都是可以访问的. <scri ...

  4. JavaScript基础知识：数据类型，运算符，流程控制，语法，函数。

    JavaScript概述 ECMAScript和JavaScript的关系 1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScript提交给国际标准化组织ECM ...

  5. javascript基础一语法和常用函数

    1语法 1.1引入的方式 在html中引入javascript,使用script标签,在html页面中包括外部引入js方式和在html内部引入js方式.如下两种: 方式一: <script ty ...

  6. JavaScript基础5——关于ECMAscript的函数

    ECMAScript的函数概述(一般定义到<head>标签之间) (1)定义函数,JavaScript一般有三种定义函数方法: *第一种是使用function语句定义函数(静态方法) fu ...

  7. JavaScript | 基础（变量/引用/转换/函数）

    ———————————————————————————————————————————— 变量 全局变量:在函数体外声明,全局可以使用 局部变量:通过关键字var来声明 变量类型 <script ...

  8. javascript基础知识2#数据类型

    数据类型 typeof 操作符 undefined类型 boolean类型 Nubmer类型 NaN(not a number) 数值转换parseInt,parseFloat String类型 字符 ...

  9. JavaScript基础知识（对象、函数与对象）

    17.对象 属性:描述对象的信息  方法:描述对象的行为  封装:只关心输入和输出(不管过程如何实现) ü 对象的分类: 内置对象(原生对象): 就是JavaScript语言预定义的对象(如Strin ...

  10. JavaScript基础知识（数据类型）

    数据类型 布尔:true/fasle console.log(typeof true);// "boolean" Number : true -->1 false --> ...

随机推荐

  1. Istio 入门(三)：体验 Istio、微服务部署、可观测性

    本教程已加入 Istio 系列:https://istio.whuanle.cn 目录 3,快速入门 书店微服务 预先准备 details 应用 ratings 应用 reviews v1/v2/v3 ...

  2. 数据库连接池之c3p0-0.9.1.2，线上偶发APPARENT DEADLOCK，如何解？

    前言 本篇其实是承接前面两篇的,都是讲定位线上的c3p0数据库连接池,发生连接泄露的问题. 第二篇讲到,可以配置两个参数,来找出是哪里的代码借了连接后没有归还.但是,在我这边的情况是,对于没有归还的连 ...

  3. DolphinScheduler3.1.7集成SAP HANA

    源码地址:GitHub - apache/dolphinscheduler at 3.1.7-release 个人fork gitee地址:DolphinScheduler:Gitee) 后端代码更改 ...

  4. 【MAUI Blazor踩坑日记】3.Windows标题栏自定义颜色，运行时改变颜色

    目录 修改默认颜色 修改运行时颜色 效果图 MAUI中Windows默认的标题栏颜色是灰色的,有一点丑. 如果去掉默认的标题栏,自己画一个,可能会出现问题,也比较麻烦. 想要自定义默认标题栏的颜色,官 ...

  5. 事务，不只ACID

    1. 什么是事务? 应用在运行时可能会发生数据库.硬件的故障,应用与数据库的网络连接断开或多个客户端端并发修改数据导致预期之外的数据覆盖问题,为了提高应用的可靠性和数据的一致性,事务应运而生. 从概念 ...

  6. Redis 持久化及集群架构

    1 Redis 持久化 1.1 持久化的概念和原因 Redis 持久化是指将 Redis 服务器中的数据保存到磁盘上,以便在服务器重启后可以重新加载数据.持久化是为了解决 Redis 内存数据库的数据 ...

  7. Docker Dockerfile指令大全

    FROM-指定基础镜像 指定基础镜像,并且Dockerfile中第一条指令必须是FROM指令,且在同一个Dockerfile中创建多个镜像时,可以使用多个FROM指令. # 语法格式 FROM < ...

  8. CF992E Nastya and King-Shamans 题解

    传送门 分析 由于满足 \(a_i\ge0\),所以 \(s_i\) 单调不减. 当我们找到一个 \(i\) 时,不管 \(i\) 是否满足,下一个可能的一定大于等于 \(a_i+s_{i-1}\). ...

  9. Jenkins 相关配置

    https://www.cnblogs.com/zylyehuo/ 参考链接 解决:Jenkins: signature verification failed in update site 'def ...

  10. O2OA(翱途)开发平台 V8.1正式发布

    尊敬的O2OA(翱途)平台合作伙伴.用户以及亲爱的开发小伙伴们,平台 V8.1版本已正式发布.正值8月的最后一周,我们以更安全.更高效.更好用的崭新面貌迎接9月的到来. O2OA开发平台v8.1版本更 ...