文章目录

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. Go语言中的结构体：灵活性与可扩展性的重要角色

    1. 引言 结构体是Go语言中重要且灵活的概念之一.结构体的使用使得我们可以定义自己的数据类型,并将不同类型的字段组合在一起,实现更灵活的数据结构.本文旨在深入介绍Go语言中的结构体,揭示其重要性和灵 ...

  2. Hugging News #0616: 有几项非常重要的合作快来围观、最新中文演讲视频回放发布！

    每一周,我们的同事都会向社区的成员们发布一些关于 Hugging Face 相关的更新,包括我们的产品和平台更新.社区活动.学习资源和内容更新.开源库和模型更新等,我们将其称之为「Hugging Ne ...

  3. JavaScript高级学习

    JavaScript 进阶 学习作用域.变量提升.闭包等语言特征,加深对 JavaScript 的理解,掌握变量赋值.函数声明的简洁语法,降低代码的冗余度. 理解作用域对程序执行的影响 能够分析程序执 ...

  4. 解决 echarts柱状图x轴数据隔一个显示

    echarts柱状图x轴数据隔一个显示   在显示一个柱状图的时候,x轴的数据是隔一个显示的,但是hover的时候却能显示出当前轴x轴的名称,如下图: 那就只能说明这个轴的名称太长了,所以导致它默认就 ...

  5. RSA 加密签名验签解密

    import javax.crypto.Cipher; import javax.crypto.spec.OAEPParameterSpec; import javax.crypto.spec.PSo ...

  6. httpx的两个坑(httpx.ReadTimeout; SSL: CERTIFICATE_VERIFY_FAILED)

    关于python异步网络请求库httpx的两个坑 其一:httpx.ReadTimeout 实测发现,网络不稳定的情况下,极其容易出现该错误. 相对于requests库, httpx库是有默认的超时时 ...

  7. FlutterWeb部署到服务器

    目标:把flutter web项目部署到自己的服务器上,可以使用自己的服务器IP访问 前提:服务器已经安装了nginx, 这是我的flutter配置 edz@lwqdeMacBook-Pro ~ % ...

  8. CVPR 2023 | RCF：完全无监督的视频物体分割

    TLDR: 视频分割一直是重标注的一个task,这篇CVPR 2023文章研究了完全不需要标注的视频物体分割.仅使用ResNet,RCF模型在DAVIS16/STv2/FBMS59上提升了7/9/5% ...

  9. ZEGO即构自建MSDN有序网络，为实时音视频传输极致顺畅！

    由于疫情反扑,音视频云通讯的使用需求再次增加,跨机房环境经常遇到网络通信质量不佳的问题,比如延迟.卡顿.画质不清晰等.网络状况是影响用户体验最大因素之一,因此提升用户网络体验的需求被各家产品highl ...

  10. [转]-- ISP（图像信号处理）算法概述、工作原理、架构、处理流程

    目录 ISP的主要内部构成: ISP内部包含 CPU.SUP IP(各种功能模块的通称).IF 等设备 ISP的控制结构:1.ISP逻辑 2.运行在其上的firmware ISP上的Firmware包 ...