html5|JS基础 -- 大复习(阶段一) html|javascript

一:编程基础编程语言（了解）
编程：就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码，并最终得到结果的过程。
从事编程的人员：就是我们程序员(程序猿)计算机是指任何能够执行代码的设备：ATM机智能手机医疗检测器械人脸识别收银系统。
计算机语言
计算机语言：计算机语言指用于人与计算机之间通讯的语言，它是人与计算机之间传递信息的媒介。
计算机语言：机器语言汇编语言高级语言
计算机最终执行的都是机器语言，是由 0和1组成的二进制数,二进制是机器语言的基础。
编程语言：汇编语言高级语言
高级语言所编制的程序不能被计算机识别，必须通过转换才能被执行，此时需要一个翻译器。
翻译器可以将我们所编写的源代码转换为机器语言。
总结：

计算机可以帮助人类解决某些问题
程序员利用编程语言编写程序发出指令控制计算机来实现这些任务
编程语言有机器语言、汇编语言、高级语言
高级语言需要一个翻译器转换为计算机识别的机器语言
编程语言是主动的有很强的逻辑性

初始JavaScript JavaScript语言创造者:布兰登·艾奇.
JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言（Script 是脚本的意思）
脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行
现在也可以基于 Node.js 技术进行服务器端编程
JavaScript 的作用
表单验证网页特效服务端开发(node.js) 桌面应用 app 游戏开发等。
HTML/CSS/JS 的关系：
HTML/CSS是标记语言--描述类语言。
JS 脚本语言--编程类语言--编程语言
浏览器执行 JS
浏览器分成两部分：渲染引擎和 JS 引擎
JS 引擎：也称为 JS 解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如 chrome 浏览器的 V8
浏览器本身并不会执行js代码。而是通过内置 JS 引擎来执行代码。js引擎执行代码时逐行解释每一句源代码，然后再由计算机去执行，所以 JavaScript 语言归为脚本语言，会逐行解释执行。
JS 的组成

ECMAScript(规定了js的基础语法)
DOM 文档对象模型主要是提供一些操作HTML文档的工具
BOM 浏览器对象模型主要是提供一些操作浏览器的工具

js书写位置
三种书写位置：行内式内嵌式外链式
在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号。
行内式
我们可以将JS代码写在标签里面，事件属性很多 onclick

内嵌式
需要在html代码中新建一个标签，最好将这个标签写在结束标签的前面

外链式
需要将js代码放在一个js文件中，文件的扩展名必须以.js结尾文件。需要在html标签中使用script标签引入，通过script标签的src属性来引入
第一步：新建一个以.js结尾的文件
第二步：通过script标签的src属性来引入

注意：

一个html文件可以引入多个js文件
一对script标签一次只能实现一种书写方式

js注释

单行注释 ctrl+/

// 注释的内容
多行注释默认的快捷键 shift + alt + a，vscode中可以修改为：ctrl + shift + /
vscode → 首选项按钮 → 键盘快捷方式 → 查找原来的快捷键 → 修改为新的快捷键 → 回车确认

/* 注释的内容 */

js 输入输出语句
// 输出语句

prompt() 它会向浏览器上弹出一个输入的对话框用的不多

// 输入语句 prompt('请输入您的年龄')
输出语句
alert(‘内容’) 向浏览器中弹出一个警告的提示框使用的比较少
console.log('内容') 向浏览器的开发者工具中的console选项卡输出内容 log
document.write('输出的内容') 向body标签里面输出内容可以是html标签

// 输出语句 alert('我是弹出来的') console.log('我是控制台输出的'); //document 文档write：写入 document.write('输出内容') document.write('标题标签')

语句结束符(补充)
js一行中如果只写一条语句，在语句的末尾可以加分号也可以不加分号，建议不加
如果一行中写了多条语句，每一条语句的末尾需要加分号，如果不加就会报错。
几乎没有一行中写多条JS语句的代码

alert('hello') alert('world'); // 报错 alert('hello'); alert('world'); // 正确

js-变量（重要）变量概念
大白话：变量就是用来装东西的盒子。
通俗：变量是用于存放数据的容器。可以通过变量获取数据，也可以修改数据。
本质：变量是程序在内存中申请的一块用来存放数据的空间
变量的使用

声明变量
变量赋值

创建变量
第一种方式：
先声明变量，然后再赋值

var age; // 声明变量 age = 18; // 给变量名age赋值

第二种方式：
在声明变量的同时赋值，直接赋值称之为变量的初始化

var age = 20; // 变量初始化

创建变量一定要加var关键字
使用变量
比如输出变量
变量案例弹出用户名
使用变量来保存用户输入的数据

变量语法扩展

变量语法扩展-更新变量
一个变量被重新复赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。

//更新变量 var uname = '张三' console.log(uname); uname = '李四' console.log(uname);

变量语法扩展-声明多个变量
同时声明多个变量时，只需要写一个 var，多个变量名之间使用英文逗号隔开。

var uname = '张三', age = 18, address = '木叶村' console.log(uname,age,address);

声明变量的注意点

// 只声明不赋值 var age console.log(age); // undefined // 不声明不赋值直接使用 console.log(MyName); //MyName is not defined 未定义 // 不声明只赋值 uname = '张三' console.log(uname); // 但是在js的严格模式下会报错，

js的严格模式(补充)

// 使用严格格式加了 'use strict' 使用es6以上的js如果没有 es5 'use strict' uname = '张三' console.log(uname) // 报错uname is not defined // 大家定义变量时一定要记得加var

变量命名规范

由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name
严格区分大小写。var app; 和 var App; 是两个变量
不能以数字开头。 18age 是错误的
不能是关键字、保留字。例如：var、for、while
变量名必须有意义。 MMD BBD nl → age
遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。 myFirstName
推荐翻译网站：有道爱词霸

报错
如果上一行有错误，下面的代码都不会被执行

console.log(MyName); // 报错uname is not defined 会影响下面代码的执行 var uname = '张三' console.log(uname);

交换2个变量的值

// 交换2给变量的值
/* 1.1 先创建2个变量 */
var apple1 = '青苹果'// 左手
var apple2 = '红苹果'// 右手
/* 1.2 声明一个临时变量为空 */
vartemp // 板凳
/* 1.3 先将左手的苹果给temp变量此时左手就空出来 */
temp = apple1
/* 1.4 把右手的苹果给到左手此时右手就空出来 */
apple1 = apple2
/* 1.5 把板凳上的苹果给到右手 */
apple2 = temp
console.log(apple1); // 红苹果
console.log(apple2); // 青苹果
console.log(apple1,apple2); //可以同时打印多个变量，变量之间用逗号隔开。

数据类型(重要) 车在现实生活都有分类，货车，客车。
数据：有数字，有中文等等。方便JS语言对其进行管理。
但是JS是一门弱类型的脚本语言。
弱类型：在声明变量的时候不需要先规定这个变量的类型是什么，但是我们JS的变量也是有类型，只不过它的类型是由变量的值来决定的。
强类型：在声明变量的时候一定要先规定这个变量的是什么类型学习成本要高一些
强类型的语言它的效率高，弱类型的语言它的效率低。JS的内置的解析器它要判断我们声明的变量是什么类型
JS 把数据类型分为两类：

简单数据类型（Number,String,Boolean,Undefined,Null）
复杂数据类型（object)

基本数据类型：一个变量只能保存一个值
复杂数据类型：一个变量可以保存多个值
基本数据类型：Number、String 、Boolean、undefined、null
数字型 Number
变量的值包含：数字、NaN

JavaScript中数值的最大和最小值

alert(Number.MAX_VALUE); // 1.7976931348623157e+308 alert(Number.MIN_VALUE); // 5e-324

数字型三个特殊值

alert(Infinity); // Infinity alert(-Infinity); // -Infinity alert(NaN); // NaN

Infinity ，代表无穷大，大于任何数值Infinity
代表无穷小，小于任何数值NaN
Not a number，代表一个非数值
typeof
作用：用于检测一个变量的数据类型

// var num = 10
var num1 = NaN
// 检测num这个变量的类型
var res = typeof num1
// 输出res变量的值
console.log(res);

isNaN()
用来判断一个变量是否为非数字的类型，返回 true 或者 false

var number = 10;
console.log(isNaN(number)); // false
var number1 = "三国演义";
console.log(isNaN(number1)); // true

字符串 String
字符串型可以是引号中的任意文本，其语法为双引号 "" 和单引号''，但是推荐大家使用单引号。
只要变量的值用引号(单引号和双引号)包裹起来的那么这个变量就是字符串，不管引号里面是什么。

var str = '1234'; console.log(typeof res); // String类型

注意：字符串类型就要=需要加引号，如果不加就会报错。

var str1 = 我派大星; // 报错，没使用引号，会被认为是js代码，但js没有这些语法

字符串引号嵌套

JS 可以用单引号嵌套双引号，或者用双引号嵌套单引号 (外双内单，外单内双)
如果是一个单引号定义的变量，在这个字符串里面如果还想要出来引号那么记得写在双引号
如果是一个双引号定义的变量，在这个字符串里面如果还想要出来引号那么记得写在单引号

// 字符串引号嵌套 var str = '我是一个高\n富帅' document.write(str);

字符串转义

转义符都是 \ 开头的
常用的是：\n (换行符) \t (tab缩进)
获取字符串长度
语法：

变量名.length

// 获取字符串长度语法 str.length //var str = 'javascript' var str = '天才派大星' var len = str.length; console.log(len);

字符串拼接
字符串拼接使用 + 来进行拼接
多个字符串之间可以使用 + 进行拼接，其拼接方式为字符串 + 任何类型 = 拼接之后的新字符串
字符串与变量名要进行拼接的话只能使用 +
如果 + 号有一边是字符串类型的数据那么就会执行字符串拼接的功能
如果 + 号两边都是number类型的数据就是执行加法运算

// 字符串拼接 console.log('关公' + '舞大刀'); //'关公舞大刀' // + 号两边都是number类型的数据就是执行加法运算 console.log(12 + 13); // 25 // + 号有一边是字符串类型的数据那么就会执行字符串拼接的功能 console.log('12' + 13); // '1213'

+ 号总结口诀：数值相加，字符相连
字符串拼接加强
变量是不能添加引号的，因为加引号的变量会变成字符串
js字符串类型的数据我们使用单引号或者是双引号定义的字符串变量如果字符串里面出现了变量名，那么这个变量名是不会被解析的。

var age = 18 var str = '派大星今年age岁了' // 字符串里面出现了变量名，那么这个变量名是不会被解析的 console.log(str); // 派大星今年age岁了

如果想要在字符串解析变量那么就要使用字符串拼接。

var age = 18
var str1 = '派大星今年' +age+'岁了'
console.log(str1);

扩展-模板字符串(es6)
通过变量拼接，会很容易出错，尤其是在遇到单引号和双引号同时出现的场景。而使用模板字符串语法就不会出现上述问题，
模板字符串在声明字符串的时候采用的是反引号 `` esc键下面的那个键
模板字符串中不在使用加号进行拼接，可以直接嵌入变量，只需要将变量写在${}之中

// 模板字符串 ``
// 模板字符串中不在使用加号进行拼接，可以直接嵌入变量，只需要将变量写在`${}`之中
varage = 18
var str = `金波老师今年${age}岁了`
console.log(str);

扩展-模板字符串案例

var username = '葫芦娃'
var age = 18
var sex = '男'
var height = 183
var str =
`

姓名年龄性别身高

${username} ${age} ${sex} ${height}

`
document.write(str)

姓名	年龄	性别	身高
${username}	${age}	${sex}	${height}

样式代码：

table {
width: 800px;
margin: 0 auto;
border: 1px solid red;
border-collapse: collapse;
}
tr,
td,
th {
border: 1px solid red;
}

显示年龄案例

// 1. 需要有一个输入对话框
var age = prompt('请输入您的年龄：')
// 2. 需要构建一个字符串将数据进行拼接完了以后数据显示出来
var res = `今年${age}岁了`
document.write(res)

Boolean 类型
布尔类型，它表示真与假布尔类型变量的值只有两个： true 和 false
true的值为1 false的值为0

// 定义布尔类型变量
var flag = true;
console.log(typeof flag);

undefined类型
未定义的数据类型
如何得到未定义的数据类型

【html5|JS基础 -- 大复习(阶段一)】声明一个变量没有赋值，直接使用
声明一个变量将变量的值赋值为 undefined

// 如何得到未定义的数据类型
/* 1. 声明一个变量没有赋值，直接使用 */
var username
console.log(typeof username); // undefined
// 2. 声明一个变量将变量的值赋值为 undefined
var age = undefined
console.log(typeof age); // undefined

null
空数据类型
如何得到空数据类型
将一个变量的值赋值null
我们通过 typeof来检测null类型发现得到居然是object类型？？？

var v1 = null
console.log(typeof v1); // 结果是：object
// typeof来检测null类型发现得到居然是`object`类型？？

原因：为什么 typeof 运算符对于 null 值会返回 "Object"。这实际上是 JavaScript 最初实现中的一个错误，也是 JavaScript历史遗留下来的语言设计缺陷，然后被 ECMAScript 沿用了。现在，null 被认为是对象的占位符，从而解释了这一矛盾，但从技术上来说，它仍然是原始值。曾有一个 ECMAScript 的修复提案，但是该提案被无情的否决了，并且永远不会被修复。