@[toc]

一、JavaScript介绍

1.1 JS是什么

是一种运行在客户端的编程语言,实现人机交互效果。

1.2 JS作用

  • 网页特效(监听用户的一些行为让网页做出对应的反馈)
  • 表单验证(针对表单数据的合法性进行判断)
  • 数据交互(获取后台的数据,渲染到前端)
  • 服务器编程(node.js)

1.3 JS的组成

1、ECMAScript:规定了 JS 基础核心知识。

  • 比如:变量,分支语句,循环语句,对象等等。

2、web APIs:

  • DOM 操作文档,比如对页面元素进行移动,大小,添加删除等操作
  • BOM 操作浏览器,比如页面弹窗,检测窗口宽度,存储到数据流量器等等
    请添加图片描述

1.4 JavaScript书写位置

1、内部
直接在 HTML 文件里,用 script 标签包住
规范:script 标签写在 </body> 上面
拓展:alert('hello world') 页面弹出警告对话框
注意:因为网页的解析顺序是从上到下,所以 JS 在最后

<body>
    <script>
        aletr('hello world')
    </script>
</body>

2、外部
代码写在以 .js 结尾的文件里
语法:通过 script 标签,引入 HTML 页面中。
注意:在 script 中间不能写标签,不然忽略不执行

<body>
    <script src="外部文件.js"></script>
</body>

3、内联
代码写在标签内部
语法:把 js 标签写在 onclick 里面
注意:此处作为了解即可,但是 Vue 框架里会用

<body>
    <button onclick="alert('hello world')">点击有惊喜</button>
</body>

1.5 JavaScript注释

1、单行注释

  • 符号://
  • 作用:// 右边忽略
  • 快捷键:Ctrl+/
    在这里插入图片描述

2、块(多行)注释

  • 符号:/ /
  • 作用:在 /**/ 里所有内容忽略
    在这里插入图片描述

1.6 JavaScript结束符

  • 代表语句结束
  • 英文分号 ;
  • 可写可不写(现在大多程序员选择不写)
  • 换行(回车)会识别结束符,所有一个完整的语句不要动手换行
  • 因此开发中许多人主张书写 JavaScript 代码时省略结束符
  • 但为了风格统一,要写结束符就每句都写,要么都不写(按照团队要求)
    在这里插入图片描述

1.7JavaScript输入输出语法

什么是语法?

  • 任何计算机打交道规则约定
  • 我们按照这个规则去写
  • 我们程序员需要操控计算机,需要计算机能看懂
  • 输入输出也可以理解为人与计算机的交互,用户通过键盘鼠标向计算机输入信息,计算机处理后再展示结果给用户,这便是一次输入和输出的过程

1.输出语法

document.write('要输出的内容')

向 body 内输出内容,如果输出的内容是标签,也会解析成网页元素

aletr('要输出的内容')

页面弹出警告对话框

console.log('要输出的内容')

控制台输出语法,程序员调试使用

2、输入语句

prompt('输入内容:')

显示一个对话框,对话框中包含一条文字信息,用来提示用户输入

1.8 字面量

在计算机科学中,字面量(literal)是在计算机中描述 事 / 物

  • 1000 此时1000就是数字字面量
  • 'hello world' 字符字面量
  • [] 数组字面量
  • {} 对象字面量 等

二、变量

2.1 变量是什么?

  • 白话:变量就是一个装东西的盒子
  • 通俗:变量是计算机中用来存储数据的“容器”,它可以让计算机变得有记忆
  • 注意:变量不是数据本身,它们仅仅是一个存储数据的容器,可以理解为装东西的盒子

2.2 变量的使用

1、声明变量
要想使用变量,首先需要创建变量(专业说法:声明变量)
语法:
在这里插入图片描述
(1)声明变量有两部分构成:声明关键词,变量名(标识)
(2)let 即关键字(let:允许,许可,让,要)所谓的关键字是系统提供的专门用来声明(定义)变量的词语

2.3 变量赋值

定义一个变量后,你能够初始化它(赋值)。在变量名之后跟上一个等号 “=” ,然后是数值。

let age
// 赋值,将 18 这个数据存入 age 这个“容器”中
age = 18
// 这样 age 的值就成 18
document.write(age)

变量的初始化(常用)

let age = 18
document.write(age)

2.4 更新变量

变量赋值后,还可以通过简单的给它一个不同的值来更新它。

// 声明了一个变量 age 变量,同时里面存放了 18 这个数据
let age = 18
// 变量里面的数据发生变化更改为 19
age = 19
// 页面输出的结果为 19
document.write(age)

注意:let 不允许多次声明一个变量

2.5 声明多个变量

变量赋值后,还可以通过简单的给它一个不同的值来更新它。

let age = 18, uname = '小斌'

2.6 用户姓名输入案列

(1)输入:用户输入框:prompt()
(2)内部处理:保存数据
(3)输出:页面打印 document.write()

let uname = prompt('请输入姓名:')
document.write(uname)

2.7 交换变量

(1)声明一个临时变量 temp
(2)把 num1 的值赋值给 temp
(3)把 num2 的值赋值给 num1
(4)把 temp 的值赋值给 num2

let num1 = 10
let num2 = 20
let temp 
    temp = num1
    num1 = num2
    num2 = temp
    console.log(num1,num2)

在这里插入图片描述

2.8 变量的本质

内存:计算机中存储数据的地方,相当于一个空间
变量:是程序在内存中申请的一块用来存放数据的小空间
在这里插入图片描述

2.9 变量命名规范与规则

1.规则:必须遵守,不遵守报错

  • 由字母,数字(0-9),下划线(_),美元符号($)组成,如:usrAge,sex1,_neme
  • 严格区分大小写,var,app; 和 VAR App;
  • 不能以数字开头
  • 不能是关键字,保留字,例如:var,for,while

2.规范:建议,不遵守不会报错,但不符合行内要求

  • 变量名必须有意义,如:age,sex
  • 遵循小驼峰命名法,首字母小写,后面单词首字母大写,如:myNeme

2.10 拓展-let和var的区别

let 和 var 区别:

  • let 为了解决 var 的一些问题
  • 以后声明变量统一使用 let

var 声明:

  • 可以先使用后声明(不合理)
  • var 声明过的变量可以重复使用声明(不合理)
  • 比如变量提升,全局变量,没有块级作用域等等

2.11 拓展数组

数组(array)是一种可以按顺序保存多个数据

let 数组名 = [数据1, 数据2, ……, 数据n]
let week = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天']
// 取值 数组名[索引]
console.log(week[6])
  • 数组是按顺序保存,所以每个都有自己的编号
  • 计算机中的编号是从 0 开始,所以星期一的编号为 0,星期天的编号为 6
  • 在数组中,数据的编号也叫索引号或下标

一些术语:

  • 元素:数组中保存的每个数据都叫数组元素
  • 下标:数组中数据的编号
  • 长度:数组中数据的个数,通过数组的 length 属性获得
let names = ['小明', '小刚', '小红', '小丽', '小张']
console.log(names[0]) // 小刚
console.log(names[3]) // 小丽
console.log(names.length) // 5

2.12 常量

  • 概念:使用 const 声明的变量称为“常量”。
  • 使用场景:当某个变量永远不会改变的时候,就可以使用 const 来声明,而不是let。
  • 命名规范:和变量一致
    在这里插入图片描述
  • 注意: 常量不允许重新赋值,声明的时候必须赋值(初始化)
  • 小技巧:不需要重新赋值的数据使用const

三、数据类型

计算机世界中的万事万物都是数据。
计算机程序可以处理大量的数据,为什么要数据分类?

  • 1、更加充分和高效的利用内存
  • 2、也更加方便程序员的使用数据

3.1 数据类型的两大类

  • 基础数据类型
  • 引用数据类型
    在这里插入图片描述

3.2 数字类型

即我们数学中学习到的数字,可以是整数,小数,正数,负数。
在这里插入图片描述
JavaScript 中的正数,负数,小数等 统一称为数字类型。
注意:

  • JS 是弱数据类型,变量到底属于哪种类型,只有赋值之后我们才能确定
  • Java 是强数据类型 例如 int a = 3 必须是整数

3.3 字符串类型

通过单引号(' ')、双引号(" ")、或反引号(`)包裹的数据都叫字符串型,单引号和双引号没有本质上的区别,推荐 JS 使用单引号。
在这里插入图片描述
注意事项:

  1. 无论单引号或双引号必须成对使用
  2. 单引号/双引号可以直接嵌套,但不以自己嵌套自己(口诀:外双内单,或外单内双)
  3. 必要时可以使用转义符 \,输出单引号或者双引号

3.4 +号拼接

在字符串拼接中可以使用 + 号来拼接。
口诀:引引加加

let age = 2022 - prompt('请输入你的出生年份:')
document.write('您今年' + age + '岁了')

3.5 模板字符串

1、作用:

  • 拼接字符串和变量
  • 在没有它之前,要拼接变量比较麻烦
let age = 2022 - prompt('请输入你的出生年份:')
document.write('您今年' + age + '岁了')

2、符号

  • ``
  • 在英文输入模式下键盘的 tab 键上方那个键
  • 内容拼接变量时,用 ${} 包住变量
  • 可以换行 可以加标签
let age = prompt('请输入您的出生年份:')
document.write(`您今年${2022 - age}岁了`)

3.6 布尔类型

表示肯定或否定时在计算机中对应的是布尔类型数据。
它有两个固定的值 true 和 false,表示肯定的数据用 true(真),表示否定的数据用 false(假)
在这里插入图片描述

3.7 未定义类型undefined

未定义是比较特殊的类型,只有一个值 undefined。
在这里插入图片描述
工作中的使用场景:
我们开发中经常声明一个变量,等待传送过来的数据。
如果我们不知道这个数据是否传递过来,此时我们可以通过检测这个变量是不是undefined,就判断用户是否有数据传递过来。

3.8 空类型null

JavaScript 中的 null 仅仅是一个代表“无”、“空”或“值未知”的特殊值
在这里插入图片描述
null 和 undefined 区别:

  • undefined 表示没有赋值
  • null 表示赋值了,但是内容为空

3.8 检测数据类型typeof

typeof 运算符可以返回被检测的数据类型。它支持两种语法形式:

  1. 作为运算符: typeof x (常用的写法)
  2. 函数形式: typeof(x)

换言之,有括号和没有括号,得到的结果是一样的,所以我们直接使用运算符的写法。
在这里插入图片描述

四、类型转换

通俗来说,就是把一种数据类型的变量转换成我们需要的数据类型。

4.1 隐式转换

某些运算符被执行时,系统内部自动将数据类型进行转换,这种转换称为隐式转换
规则:

  • 号两边只要有一个是字符串,都会把另外一个转成字符串
  • 除了+以外的算术运算符 比如 - * / 等都会把数据转成数字类型

缺点:

  • 转换类型不明确,靠经验才能总结

小技巧:

  • +号作为正号解析可以转换成数字型
  • 任何数据和字符串相加结果都是字符串
    在这里插入图片描述

4.2 显式转换

转换为数字型

  • Number(数据) 转成数字型
  • parseInt(数据) 只保留整数
  • parseFloat(数据) 可以保留小数
<script>
  let str = '123'
  console.log(Number(str))
  console.log(Number('pink'))
  // let num = Number(prompt('输入年薪'))
  // let num = +prompt('输入年薪')
  // console.log(Number(num))
  // console.log(num)
  console.log(parseInt('12px'))
  console.log(parseInt('12.34px'))
  console.log(parseInt('12.94px'))
  console.log(parseInt('abc12.94px'))
  // -------------------
  console.log(parseFloat('12px')) // 12
  console.log(parseFloat('12.34px')) // 12.34
  console.log(parseFloat('12.94px')) // 12.94
  console.log(parseFloat('abc12.94px')) // 12.94
</script>

五、运算符

5.1 算数运算符

数学运算符也叫算数运算符,主要包括加(+:求和)、减( -: 求差)、乘(*: 求积)、除(/: 求商)、取余(%:取模)先乘除后加减,有括号算括号的原则,优先级相同时以从左到右执行

let r = prompt('请输入半径:')
let π = 3.1415926535
let gather = π * r * r
console.log(`圆的面积是${gather}`);

5.2 赋值运算符

赋值运算符:对变量进行赋值的运算符

  • 已经学过的赋值运算符:= 将等号右边的值给予左边,要求必须是一个容器
  • +=、-=、*=、/=、%=
let num = 1
// num = num + 2
num += 2
console.log(num);
let i = 1
let sum = 2
// sum = sun + i
sum += i
console.log(sum);
最后修改:2022 年 04 月 26 日
谢谢老板打赏