JS基础
JS基础第一天
编程语言
编程：就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码，并最终得到结果的过程。
从事编程的人员：就是我们程序员(程序猿)
计算机是指任何能够执行代码的设备：ATM机 智能手机 医疗检测器械 人脸识别收银系统。
计算机语言
计算机语言：计算机语言指用于人与计算机之间通讯的语言，它是人与计算机之间传递信息的媒介。
计算机语言：机器语言 汇编语言 高级语言
计算机最终执行的都是机器语言，是由 0和1组成的二进制数,二进制是机器语言的基础。
编程语言：汇编语言 高级语言
高级语言所编制的程序不能被计算机识别，必须通过转换才能被执行，此时需要一个翻译器。
翻译器可以将我们所编写的源代码转换为机器语言。
总结
- 计算机可以帮助人类解决某些问题
- 程序员利用编程语言编写程序发出指令控制计算机来实现这些任务
- 编程语言有机器语言、汇编语言、高级语言
- 高级语言需要一个翻译器转换为计算机识别的机器语言
- 编程语言是主动的有很强的逻辑性
计算机基础
计算机组成：硬件 软件
硬件：输入设备 输出设备 CPU 硬盘 内存
软件：系统软件（win系统 mac系统 linux系统） 应用软件（浏览器 微信 QQ vscode）
计算机数据存储到硬盘中，都是以二进制的形式进行存储
数据存储单位：bit < byte < kb < GB < TB<…
程序在计算机里的运行过程：
打开某个程序时，先从硬盘中把程序代码加载到内存中，然后CPU在执行内存中的代码。
初识javascipt
1.JavaScript语言创造者:布兰登·艾奇。JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思）
2.脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行
现在也可以基于 Node.js 技术进行服务器端编程
3.我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：
浏览器执行JS的过程
浏览器分成两部分：渲染引擎和 JS 引擎
1.渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit
2.JS 引擎：也称为 JS 解释器。 用来读取网页中的JavaScript代码，对其处理后运行，比如 chrome 浏览器的 V8
浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以 JavaScript 语言归为运行在客户端的脚本语言，会逐行解释执行。
JS 的组成
JavaScript 包括 ECMAScript、DOM、BOM
- 1.ECMAScript(规定了js的基础语法)
- 2.DOM 文档对象模型 主要是提供一些操作HTML文档的工具
- 3.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 输入输出语句
-alert() 主要用来显示消息给用户
console.log() 用来给程序员看自己运行时的消息
语句结束符(补充)
js一行中如果只写一条语句，在语句的末尾可以加分号也可以不加分号 ，建议不加
如果一行中写了多条语句，每一条语句的末尾需要加分号，如果不加就会报错。
几乎没有一行中写多条JS语句的代码
alert('hello') alert('world');// 报错
alert('hello');alert('world');// 正确
JS变量
变量的概念
大白话：变量就是用来装东西的盒子。
通俗：变量是用于存放数据的容器。可以通过变量获取数据，也可以修改数据。
本质：变量是程序在内存中申请的一块用来存放数据的空间
变量的使用
- 声明变量 var （es6 let）
- 变量赋值
创建变量
第一种方式：
先声明变量，然后再赋值
var age; // 声明变量
age = 18; // 给变量名age赋值
第二种方式：
在声明变量的同时赋值，直接赋值称之为变量的初始化
var age = 20;// 变量初始化
创建变量一定要加var关键字
使用变量
比如输出变量
变量案例弹出用户名
使用变量来保存用户输入的数据
<!-- 使用变量来保存用户输入的数据 -->
<script>
// 用户输入姓名保存到data这个变量中
var data = prompt("请输入您的姓名:")
// 将变量的值输入到浏览里面
alert(data)
</script>
变量语法拓展
-
变量语法扩展-更新变量
-
一个变量被重新复赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。
//更新变量
var uname = ‘张三’
console.log(uname);
uname = ‘李四’
console.log(uname); -
变量语法扩展-声明多个变量
-
同时声明多个变量时，只需要写一个 var， 多个变量名之间使用英文逗号隔开。
var uname = ‘张三’,
age = 18,
address = ‘木叶村’
console.log(uname,age,address); -
声明变量的注意点
-
js的严格模式(补充)
//
变量命名规范
- 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name
- 严格区分大小写。var app; 和 var App; 是两个变量
- 不能 以数字开头。 18age 是错误的
- 不能 是关键字、保留字。例如：var、for、while 变量类名不能为name
- 变量名必须有意义。 MMD BBD nl → age
- 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。 myFirstName
- 推荐翻译网站： 有道 爱词霸
报错
如果上一行有错误，下面的代码都不会被执行
console.log(MyName);// 报错 uname is not defined 会影响下面代码的执行
var uname = '张三'
console.log(uname);
交换2个变量的值
数据类型(重要)
车在现实生活都有分类，货车，客车。
数据：有数字，有中文等等。方便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 = 我爱pink老师; // 报错，没使用引号，会被认为是js代码，但js没有这些语法
- 字符串引号嵌套
JS 可以用单引号嵌套双引号 ，或者用双引号嵌套单引号 (外双内单，外单内双)
如果是一个单引号定义的变量，在这个字符串里面如果还想要出来引号 那么记得写在 双引号
如果是一个双引号定义的变量，在这个字符串里面如果还想要出来引号 那么记得写在 单引号
// 字符串引号嵌套
var str = '<h1 style="color:red">我是一个高\n富帅</h1>'
document.write(str);
- 字符串转义
转义符都是 \ 开头的
常用的是 ：\n (换行符) \t (tab缩进)
获取字符串长度
语法：
变量名.length
字符串拼接
字符串拼接使用 + 来进行拼接
多个字符串之间可以使用 + 进行拼接，其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串
字符串与变量名要进行拼接的话 只能使用 +
如果 + 号有一边是字符串类型的数据 那么就会执行 字符串拼接的功能
如果 + 号两边都是number类型的数据就是执行 加法运算
// 字符串拼接
- 号总结口诀：数值相加 ，字符相连
字符串拼接加强
变量是不能添加引号的，因为加引号的变量会变成字符串
js字符串类型的数据 我们使用单引号或者是双引号定义的字符串变量 如果字符串里面出现了变量名，那么这个变量名是不会被解析的。
var age = 18
var str = '我今年age岁了'
// 字符串里面出现了变量名，那么这个变量名是不会被解析的
console.log(str); //老师今年age岁了
如果想要在字符串解析变量那么就要使用字符串拼接。
var age = 18
var str1 = '我今年' +age+'岁了'
console.log(str1);
扩展-模板字符串(es6)
通过变量拼接，会很容易出错，尤其是在遇到单引号和双引号同时出现的场景。而使用模板字符串语法就不会出现 上述问题，
模板字符串在声明字符串的时候采用的是 反引号 `` esc键下面的那个键
模板字符串中不在使用加号进行拼接，可以直接嵌入变量，只需要将变量写在${}之中
// 模板字符串 ``
// 模板字符串中不在使用加号进行拼接，可以直接嵌入变量，只需要将变量写在`${}`之中
var age = 18
var str = `我今年${age}岁了`
console.log(str);
扩展-模板字符串案例
显示年龄案例
// 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类型
未定义的数据类型
如何得到未定义的数据类型
-
声明一个变量没有赋值，直接使用
-
声明一个变量将变量的值赋值为 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 的修复提案，但是该提案被无情的否决了，并且永远不会被修复。
mdn说明：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/typeof
基本数据类型总结：
Number(数字型) String(字符串) Boolean(布尔) Undefined(未定义) Null(空)
typeof
可用来获取检测变量的数据类型
字面量
字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。
数字字面量：8，9，10
字符串字面量：‘大前端’，‘后端’
布尔字面量：true、false
通过控制台的颜色判断属于哪种数据类型
数据类型转换
使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另外一种数据类型。
我们通常会实现3种方式的转换：
转换为字符串类型
转换为数字型
转换为布尔型
①转换为字符串型
toString() 和 String() 使用方式不一样
三种转换方式，我们更喜欢用第三种加号拼接字符串转换方式，这一方式也称为隐士转换
②转换为数字型
③转换为布尔型
代表空，否定的值会被转换为false，如 ’ ’ , 0, NaN , null , undefined
其余的值都会被被转换为true
运算符
运算符的分类
运算符（operator）也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。
JavaScript中常用的运算符有：
- 算数运算符
- 递增和递减运算符
- 比较运算符
- 逻辑运算符
- 赋值运算符
算数运算符
-
算术运算符概述
概念：算术运算使用的符号，用于执行两个变量或值的算术运算。
-
浮点数的精度问题
浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数。
var result = 0.1 + 0.2; // 结果不是 0.3，而是：0.30000000000000004
console.log(0.07 * 100); // 结果不是 7， 而是：7.000000000000001
所以：不要用浮点数来进行运算 -
表达式和返回值
表达式：是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合
简单理解：是由数字、运算符、变量等组成的式子
表达式最终都会有一个结果，返回给开发者，称为返回值
递增和递减运算符
-
递增和递减运算符概述
如果需要反复给数字变量添加或减去1，可以使用递增（++）和递减（ – ）运算符来完成。在 JavaScript 中，递增（++）和递减（ -- ）既可以放在变量前面，也可以放在变量后面。放在变量前面时，我们可以称为前置递增（递减）运算符，放在变量后面时，我们可以称为后置递增（递减）运算符。 注意：递增和递减运算符必须和变量配合使用。 -
递增运算符
- 前置递增运算符
++num 前置递增，就是自加1，类似于 num = num + 1，但是 ++num 写起来更简单。
使用口诀：先自加，后返回值
var num = 10;
alert(++num + 10); // 21 - 后置递增运算符
num++ 后置递增，就是自加1，类似于 num = num + 1 ，但是 num++ 写起来更简单。
使用口诀：先返回原值，后自加
var num = 10;
alert(10 + num++); // 20
- 前置递增运算符
比较运算符
-
比较运算符概述
概念：比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true / false）作为比较运算的结果。
-
等号比较
console.log(18 == '18'); console.log(18 === '18');
逻辑运算符
-
逻辑运算符概述
概念：逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。后面开发中经常用于多个条件的判断 -
逻辑与&&
两边都是 true才返回 true，否则返回 false
只有一种情况下是true 两边都是 true才返回 true 其它的情况都是false
-
逻辑或 ||
只要有一边为true，那么就是true，只有一种情况为false 就是两边为false 结果才为false
只有一种情况为false 就是两边都为false就是false 其它的情况都是true
-
逻辑非 ！
逻辑非（!）也叫作取反符，用来取一个布尔值相反的值，如 true 的相反值是 false
var isOk = !true;
console.log(isOk); // false -
短路运算（逻辑中断）
短路运算的原理：当有多个表达式（值）时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值;-
逻辑与
语法： 表达式1 && 表达式2
- 如果第一个表达式的值为真，则返回表达式2- 如果第一个表达式的值为假，则返回表达式1 console.log( 123 && 456 ); // 456 console.log( 0 && 456 ); // 0 console.log( 123 && 456&& 789 ); // 789 -
逻辑或
语法： 表达式1 || 表达式2
- 如果第一个表达式的值为真，则返回表达式1- 如果第一个表达式的值为假，则返回表达式2 console.log( 123 || 456 ); // 123 console.log( 0 || 456 ); // 456 console.log( 123 || 456 || 789 ); // 123
-
赋值运算符
概念：用来把数据赋值给变量的运算符。
var age = 10;
age += 5; // 相当于 age = age + 5;
age -= 5; // 相当于 age = age - 5;
age *= 10; // 相当于 age = age * 10;
1.7 运算符优先级
- 一元运算符里面的逻辑非优先级很高
- 逻辑与比逻辑或优先级高
623
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
