[梳理篇]JavaScript---学习过程中的回过头 (待补充)

本文链接：https://blog.csdn.net/IDApprentice/article/details/124668220

前言

@以pink老师的教学为思路进行梳理

身是菩提树，心如明镜台，时时勤拂拭，勿使惹尘埃
小卓学习前端也有259200秒左右, 但是感觉对于JS的理解感觉还很浅薄, 所以打算从头开始再来一遍,这是第一次,但不会是最后一次,这次是以笔记的形式进行梳理, 若干月后的下次梳理, 如果不出意外将以思维导图的形式, 搭建并且完善个人知识框架.最后在此诚邀,技术爱好者们一起学习,共同进步,如有语病或是有争议,请直接指出,谢谢!

$\textcolor{blue}{原创不易，还希望各位大佬支持一下}$

$\textcolor{green}{点赞，你的认可是我创作的动力！}$

⭐️ $\textcolor{green}{收藏，你的青睐是我努力的方向！}$

✏️ $\textcolor{green}{评论，你的意见是我进步的财富！}$

     一.计算机基础部分(可选看)
     二. 初步认识JS
             1 . JavaScript简单介绍
             2 . JavaScript 是什么
             3 . JavaScript 的应用领域有什么呢?
             4 . 浏览器是如何执行JavaScript的呢?
             5 . JS的基本组成是什么?

     三. JS的书写位置
     四. JS的输入输出
     五. 变量
     六. 数据类型

一.计算机基础部分(可选看)

什么是计算机程序?

就是计算机所执行的一系列的指令集合

程序是怎么运行的呢(简略)?
分两步:

    第一步: 由OS 将程序中的代码 加载到内存中去

    第二步: 由CPU执行内存中代码

计算机语言大体分为三大类: 机器语言, 汇编语言, 高级语言三大类
高级语言所编制的程序不能直接被计算机识别, 必须经过转换才能被执行, 所以我们需要一个翻译器, 翻译器可以将我们所编写的源代码转换为机器语言, 也可以称为二进制化

编程语言和标记语言什么区别?

编程语言是具有逻辑性和行为能力的指令, 是主动的

而标记语言不用向计算机发出指令, 常用于格式化和链接. 标记语言的存在是用来被读取的, 他是被动的

存储单位	换算情况
位(bit)	1bit可以保存一个0或者1 (最小的存储单位)
字节(Byte)	1B = 8bit
兆字节(MB)	1MB = 1024KB
千字节(KB)	1KB = 1024MB
吉字节(GB)	1GB = 1024MB
太字节(TB)	1TB = 1024GB
大小情况:	bit < Byte < kb < GB < TB

二. 初步认识JS

1 . JavaScript简单介绍

由布兰登·艾奇 1995年 10天设计出来的玩意 (说实话小卓刚刚知道的时候人都傻了大佬10天设计菜鸡的我花费100天入门 orz ~)
网景公司最初命名为 LiveScript, 后来在与Sun合作之后将其改名位 JavaScript

2 . JavaScript 是什么

1 ) JavaScript 是运行在客户端的脚本语
2 ) 所谓脚本语言就是说不需要编译, 由 Js引擎 (也就是浏览器里面的东西比如: V8) 逐步来进行解释并且执行

3 . JavaScript 的应用领域有什么呢?

表达动态验证

网页的特效

服务端的开发(就是写后台用Node.js 也就是说可以用Node.js 写后端)

桌面程序

APP

游戏开发等

4 . 浏览器是如何执行JavaScript的呢?

首先我们要知道浏览器分为两部分组成:　渲染引擎　和　ＪＳ引擎

渲染引擎（也叫做内核）：　是用来解析ＨＴＭＬ与ＣＳＳ的，　比如Ｃｈｒｏｍｅ浏览器中的　ｂｌｉｎｋ

ＪＳ引擎（也叫做ＪＳ解释器）：　用来读取网页中的ＪａｖａＳｃｒｉｐｔ代码，　然后进行处理，　比如Ｃｈｒｏｍｅ浏览器的Ｖ８

5 . JS的基本组成是什么?

在这里插入图片描述

三. JS的书写位置

分别有三类: 行内式内嵌式外部式
在这里插入图片描述

实例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<!-- 内嵌式的JS -->
<!-- <script>
    alert('你除了学习还有其他可选嘛？')
</script> -->

<!-- 外部式的JS -->
<script src="学习.js"></script>
</head>
<body>
    <!-- 行内式的JS -->
    <input type="button" value="你一定可以" onclick="alert('静下心学好自己的')">
</body>
</html>

在这里插入图片描述

四. JS的输入输出

方法	解释
alert()	浏览器弹出警示框
console.log()	浏览器控制台打印输出信息
prompt()	浏览器弹出输入框,用户可以输入

实例如下:
在这里插入图片描述

五. 变量

什么是变量?

变量就是存储数据的容器, 并且通过变量名获取数据

进一步解释:
变量是程序在内存中申请存放数据的空间

更新变量: 一个变量被重新赋值后, 它原有的值会被覆盖, 变量值将以最后一次赋的值为准

在这里插入图片描述

经验之谈
var(variable 的缩写这个单词也是变量的意思) 在ES6之后有点比较少了用的最多的是 let和const搭配

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 声明但是没有赋值  输出为 undefined
      var dream;
      alert(dream);

      //不声明 不赋值   报错
      alert(future);

    //   不声明 直接赋值   输出结果为30 (不提倡)
        day = 30;
    </script>
</head>
<body>
    
</body>
</html>

变量的命名规范是什么（其实这个在刚入门的时候简单背一下也好　因为到后面，其实我们如果出现命名错误，我们的编译器会报错的哦）?
1 ) 　由字母, 数字, 下划线, 美元符号($)组成

2 )　严格区分大小写

３)　变量的命名必须表达准确的含义

４）遵循驼峰命名法．　首字母小写，　后面单词的首字母都需要大写．例子：ｍｙＦｉｒｓｔＮａｍｅ

５）不能以数字开头, 不能是关键字或者保留字

经验之谈:

尽量不要直接使用name作为变量名, 因为在大多浏览器中,name是有特殊含义的

什么是标识符?什么是关键字?什么是保留字?
标识(zhi)符: JavaScript标识符包括变量名, 函数名和属性名.
进一步解释: 就是值开发人员为变量, 属性,函数, 参数取的名字标识符不能是关键字或者保留字

关键字: 就是具有特定用途的一组名称. 比如: var let const for break 等等
进一步解释: 是指JS本事已经使用了的字, 不能再用他们充当变量名, 方法名

保留字: 就是JavaScript 内部预备使用的一组名称, 说白了就是后面版本迭代,会充当关键字
进一步解释: 保留字说白了就是预留的 “关键字”, 意思是现在虽然还不是关键字, 但是为了可能会成为关键字

六. 数据类型

为什么需要数据类型?
因为在计算机中, 不同数据所需的存储空间是不同的,为了充分利用存储空间, 所以才有了数据类型

数据类型的分类?
在这里插入图片描述

拓展:

八进制 0~7 在程序里面的数字前加 0 表示八进制例子: var result = 010; // 输出为 8

十六进制数字前加 0x (零X) 表示十六进制

数据类型部分的基本常识:

什么是隐式转换?(这个待补充暂时先忽略)

ｐｒｏｍｐｔ（）；／／提供让用户输入的输入框取过来的值的数据类型是字符串类型

prompt取过来的值是字符型(String类型的)的

typeof(); 判断数据类型

isNaN(); 用来判断一个变量是否为非数字的类型, 如果是数字则返回false, 不是则返回true

字符串类型:

1 ) 我们一般使用单引号比如: var a = ‘asda’; let a = ‘xzczxc’; 等等

如果需要使用字符串引号嵌套: 可以使用单引号嵌套双引号, 或者双引号嵌套单引号

   实例:  let ans = 'asd"888"sd';  alert(ans);
   
  //输出结果为  'asd"888"sd'

2 ) 如果需要换行可以直接在字符串中添加 \n 直接换行　比如　： ‘阿萨\n大大’
输出结果:
啊萨
大大

3 ) 字符串中的转义字符

    其中的换行 和 缩进重点记忆一下就可以了 其他的随缘吧~

转义符	说明
`\n`	换行符, n是 newline的含义
`\\`	是将会输出一个斜杆 \|
`\'`	输出一个单引号
`\"`	输出一个双引号
`\t`	tab 缩进
`\b`	空格, b是blank的意思

4 ) 若干实例以及相关知识点(看一遍留个印象):

字符串　+　任何类型　＝　拼接之后形成新字符串
原理: 拼接之前会把字符串相加的任何类型　首先转换成字符串，　然后拼接成一个新的字符串

布尔类型有两个值：　ｔｒｕｅ和ｆａｌｓｅ，　其中ｔｒｕｅ表示真，　而ｆｌａｓｅ表示假

布尔型和数字型相加的时候，　ｔｒｕｅ值为　１　ｆａｌｓｅ值为０

ｕｎｄｅｆｉｎｅｄ（Ｕｎｄｅｆｉｎｅｄ类型）　与　数字相加结果是　ＮａＮ（是Ｎｏｔ　ａ　ｎｕｍｂｅｒ的缩写）

ｎｕｌｌ（空类型）值，　里面存的值为空

在这里插入图片描述

什么是字面量?
字面量就是表示一个固定值 . 分为数字字面量, 字符串字面量. 布尔字面量

数据类型的转换

什么是数据类型的转换?

简单来说: 就是把一种数据类型转换为另一个数据类型

常用的三种
方式的转换: 转换为字符串类型, 转换为数字型, 转换为布尔型

转换为字符串:

方式	说明	案例
toString()	转换为字符串	let str = 888; alert(str.toStirng());
String()强制转换	转换为字符串	let str = 888; alert(String(str));
直接加引号(这个最重要 )	借助字符串拼接的特性	let str = 888; alert(str + ‘戒骄戒躁专注专注’);

     其中直接加引号的方式进行字符串拼接的 则是 利用了隐式转换

实例如下:
在这里插入图片描述

转换为数字型:
其中前两个方式是最重要的那是不是应该多敲几遍?

方式	说明	案例
parseInt(string) 函数	将string类型转换成整数数值型	parseInt(‘88’);
parseFloat(string)函数	将string类型转换成浮点数数值型	parseFloat(‘88.88’);
Number()强制转换函数	将string类型转换为数值型	Number(‘88’);
js隐式转换()	利用算术运算隐式转换为数值型	‘88’ - 0