学习javascript这一篇就够了超详细笔记（建议收藏）上

1.初识

计算机基础导读

***学完应掌握的知识点

• 能够说出什么是编程语言
• 能够区分编程语言和标记语言的不同
• 能够说出常见的数据存储单位机器换算关系
• 能够说出内存的主要作用以及特点

***本章学习的知识点

• 编程语言
• 计算机基础

编程语言

编程：

​ 就是让计算机为解决某个问题而使用每种程序设计语言编写程序代码，并最终得到结果的过程。

计算机程序：

​ 就是计算机所执行的一系列的指令集和，而程序全部都是用我们所掌握的语言来编写的，所以人们要控制计算机一定要通过计算机语言向计算机发出命令。

计算机语言：指用于人与计算机之间通讯的语言，它是人与计算机之间传递消息的媒介。

计算机语言的种类非常多，总的来说可以分成机器语言，汇编语言和高级语言三大类。

​ 实际上计算机最终所执行的都是机器语言，它是由0 和 1 组成的二进制数，二进制是计算机语言的基础。

编程语言：

​ 可以通过类似于人类语言的“语言”来控制计算机，让计算机来为我们做事情，这样的语言就叫做编程语言。

​ 编程语言是用来控制计算机的一系列指令，它有固定的格式和词汇（不同的编程语言的格式和词汇不一样），必须遵守。

​ 如今通用的编程语言有两种形式：汇编语言和高级语言。

​ 汇编语言和机器语言实质是相通的，都是直接对硬件操作，只不过指令采用了英文缩写的标识符，容易识别和记忆。

高级语言注意是相对于低级语言而言，他并不是特指某一种具体的语言，而是他包括了很多编程语言，程永德有c语言，c++，java，c#，python，javascript，go语言，objective-c，swift等。

翻译器：

​ 高级语言所编制的程序不能直接被计算机识别，必须经过转换才能被执行，为此，我们需要一个翻译器可以将我们所编写的源代码转换为机器语言，这也被称为二进制化。记住1和0. -->

​ <!-- * 编程语言和标记语言区别：

​ - 编程语言有很强的逻辑和行为能力。在编程语言里，你会看到很多if else、for、while等具有逻辑性和行为能力的指令，这是主动的。

​ - 标记语言不用于向计算机发出指令，常用语格式化和连接。标记语言的存在就是用来被读取的，他是被动的。

总结

1.计算机可以帮助人类解决某些问题

2.程序员利用编程语言编写程序发出指令控制计算机来实现这些任务

3.编程语言有机器语言、汇编语言、高级语言

4.高级语言需要一个编译器转换为计算机识别的机器语言

5.逻辑语言是主动的有很强的逻辑性

计算机基础

1.计算机组成

电脑：

​ - 硬件

​ ·输入设备:鼠标键盘手写板摄像头

​ ·输出设备:显示器打印机投影仪

​ · CPU:负责处理数据与运算

​ ·硬盘&内存：负责存储数据，硬盘永久存储数据，内存暂时存储数据

​ - 软件

​ ·系统软件：windows、linux、macOs

​ ·应用软件：浏览器、qq

2.数据存储

​ 1.计算机内部使用二进制0和1来表示数据。

​ 2.所有数据，包括文件，图片等最终都是以二进制数据（0和1）的形式存放在硬盘中的。

​ 3.所有程序，包括操作系统，本质都是各种数据，也就是二进制数据的形式存放在硬盘中。平时我们所说的 安装软件，其实就是把程序文件复制到硬盘中。

​ 4.硬盘、内存都是保存二进制数据。

数据存储单位

​ bit < byte < kb < mb < gb < gb < tb<…

​ - 位（bit）：1bit可以存储一个0或者1（最小的存储单位）

​ - 字节（Byte）：1B = 8b

​ - Kb:1Kb = 1024B

​ - MB:1MB = 1024KB

​ - GB:1GB = 1024MB

​ - TB:1TB = 1024GB

程序运行

​ 1.打开某个程序时，先从硬盘中把程序的代码加载到内存中

​ 2.cpu执行内存中的代码

​ 注意：之所以要内存的一个重要原因，是因为cpu运行太快了，如果只从硬盘中读取数据，会浪费cpu性能，所以，才使用存取速度更快的内存来保存运行时的数据。（内存十点，硬盘是机械）

初识js

js是世界上最流行的语言之一，是一种运行在客户端的脚本语言（scrip是脚本的意思）

脚本语言：不需要解释，运行过程中由js解释器（js引擎）逐行来进行解释并执行

- 现在也可以基于Node.js技术进行服务端编程

html/css标记语言-描述类语言

- html决定网页结构和内容（决定看到什么），相当于人的身体

- css决定网页呈现给用户的墨阳（决定好不好看），相当于给人家穿衣服、化妆

js脚本语言-编程类语言

- 实现业务逻辑和页面控制（决定功能），相当于人的各种动作。

浏览器执行

浏览器分为两部分：渲染引擎和js引擎

​ - 渲染引擎：用来解释html和css，俗称内核，比如chrome浏览器的blink，老版本的webkit

​ - js引擎：也成为了js解释器。用来读取网页中的javascript代码，对其处理后运行，比如chrome浏览器的v8

​ 注意：浏览器本身并不会执行js代码，而是通过内置javascript引擎（解释器）来执行js代码。js引擎执行代码时逐行解释每一句源码（转换机器语言），然后由计算机去执行，所以javascript语言归为脚本语言，会逐行解释执行。

js组成

javascript

​ - ECMAScript:是由ECMA国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，他往往被称为javascript或JScript，但实际上后者是ECMAscript语言的实现和拓展。

​ 注意：ECMAScript规定了js的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套js语法工业标准。

​ - DOM——文档对象模型:（Document Object Model，简称DOM），是w3c组织推荐的处理可拓展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。

​ - BOM——浏览器对象模型:BOM（Browser Object Model，简称BOM）是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

js初体验-三种书写位置

1.行内js 直接写到元素的内部

<input type="button" value="唐伯虎" onclick="alert('点秋香')">

2.内嵌式的js

<script>
        alert('我是风中的余烬！')
    </script>

3.外部js

<script src="my.js">这里不可以写代码！</script>

外部创建了一个.js文件 并引入

js注释

//1.单行注释 ctrl+ /

​ /* 2.多行注释 默认快捷键shift+alt+a

​ 2.多行注释 vscode可以修改快捷键 */

js输入输出语句

<script>
        // * 这三个都归属于浏览器
        // 这是一个输入框
        prompt('请输入你的年龄？');
        // alert弹出警示框 输出的 展示给用户的
        alert('成年可以，未成年不可浏览该网站！');
        //console 控制台输出 给程序员测试用的
        console.log('我是程序员能看到的');
    </script>

2.变量

变量导读

***学完掌握的知识点

- 能够说出变量的主要作用

- 能够写出变量的初始化

- 能够说出变量的命名规范

- 能够画出变量是如何在内存中存储的

- 能够写出交换变量的案例

**学习的知识点

* 变量概述

* 变量的使用

* 变量的语法拓展

* 变量的命名规范

* 交换变量的案例

什么是变量？

什么是变量？

​ 白话：变量就是一个装东西的盒子。

​ 通俗:变量是用于存放数据的 容器 。我们通过 变量名 获取数据，甚至数据可以修改。

变量在内存中的存储

​ 本质：变量是程序在内存中申请的一块用来存放数据的空间。类似于我们酒店的房间，一个房间就可以看做是一个变量。

简单来说：

​ 酒店就是内存，申请变量就是开房（可以开很多房，房间(内存)只要够），变量名就是房间门牌号（我们可以从变量名找到变量）

变量的使用

<script>
        // 变量在使用的时候分为两步：1.声明变量 2.赋值


        // 1.声明一个名称为age的变量
        var age;
        // - var 是一个js关键字 用来声明变量（variable变量的意思）。使用该关键字声明变量后，计算机自动会自动为变量分配内存空间，不需要程序员管。
        // - age 是程序员定义的变量名，我们要通过变量名来访问内存中分配空间。


        // 2.赋值 把值存到这个变量当中
        age = 18;
        // - = 用来把右边的值付给左边的变量空间中 此处代表赋值的意思
        // - 变量值是程序员保存到变量空间的值


        // 3.输出结果
        console.log(age);
        // 4.声明变量并赋值 我们称之为 《变量的初始化》
        var myname = '风向巴巴';
        console.log(myname);
    </script>

案例

<script>
        var myname = '亚索';
        var age = '30岁';
        var address = '居无定所';
        var gz = 300;
        console.log(myname);
        console.log(age);
        console.log(address);
        console.log(gz);
    </script>

变量案例弹出用户名

<script>
        // 1.用户输入姓名，存储到一个myname的变量里
        var myname = prompt('请输入你的名字：');
        // 2.输出这个用户名
        alert(myname);
    </script>

变量的扩展

1.更新变量-一个变量被重新赋值后，他原有的值就会被覆盖，变量值将以最后一次赋的值为准。

var myname = ('fx');
        console.log(myname);
        myname = '刘亦菲';
        console.log(myname);

2.声明多个变量

// var age = 18;
        // var address = '火影村';
        // var gz = 2000;
        var age = 18,
            address = '火影村',
            gz = 2000;
        console.log(age);
        console.log(address);
        console.log(gz);

3.声明变量的特殊情况

​ 3.1只声明不复制 结果是？ 程序也不知道里面存的啥 所以结果是underfined（未定义的）

var sex;
        console.log(sex); //underfined

​ 3.2不声明 不赋值 直接使用某个变量会报错的 报错的话下面的代码也不会执行了 停止了

 console.log(tel);

​ 3.3不声明直接赋值使用 （不推荐使用）

qq = 110;
        console.log(qq);

变量的命名规范

1.变量名可以由字母、数字、下划线(_)、美元符号($)组成。

2.变量名严格区分大小写

var app = 10;
        var App = 100;
        console.log(app);
        console.log(App);

3.变量名不能以数字开头

var 18age;

4.不能是关键字 保留字 例如：var for while (后有详细介绍）

var var;

5.变量名必须有意义 比如 nl–age (尽量使用英文单词 一眼得知什么意思）

6.遵守驼峰命名法 首字母小写 后面单词的首字母需要大写 myFirstName

7.推荐翻译网站：有道 爱词霸

8.尽量不要使用name变量名

console.log(tel);不会报错
console.log(name);会报错

交换两个临时变量的值

js 是编程语言 有很强的逻辑性在里面： 实现这个要求的思路 要先怎样后怎样

1.我们需要一个临时变量
2.我们把apple1 给我们的临时变量temp
3.然后把apple2 给我们的apple1
4.最后把temp 给我们的apple2

var temp;//声明了一个变量为空
        var apple1 = 'zuo';
        var apple2 = 'you';
        // 程序给值 都是右给左
        var temp = apple1;
        var apple1 = apple2;
        var apple2 = temp;
        console.log(apple1);
        console.log(apple2);

变量小结

为什么需要变量？

​ -因为我们一些数据需要保存 所以需要变量

* 变量是什么？

​ -变量就是一个容器 用来存放数据的 方便我们以后使用里面的数据

* 变量的本质是什么？

​ -变量是内存的一块空间 用来存放数据的

* 变量怎么使用的？

​ -我们使用变量的时候 一定要声明变量 然后赋值

​ -声明变量的本质是去内存申请空间

* 什么是变量的初始化?

​ -声明变量并赋值我们称之为变量的初始化

* 变量命名规范有哪些？

​ -变量名尽量要规范 闻名知意——驼峰命名法

​ -区分哪些变量名不合法

* 交换2个变量值得思路？

​ -学会交换2个变量

3.数据类型

数据类型导读

**学完要掌握的知识点

- 能够说出5种简单数据类型

- 能够使用typeof获取变量的类型

- 能够说出1~2种转换为数值型的方法

- 能够说出1~2种转换为字符型的方法

- 能够说出什么是隐式转换

**学习的知识点

* 数据类型简介

* 获取变量数据类型

* 获取变量数据类型* 数据类型转换

变量的数据类型

// int num = 10; Java写法 直接定义称整型 右边值非整型就会报错

// var num; //这里的num 我们是不确定属于那种数据类型的
        var num = 10; //num属于数字型 （输入的值是什么类型 就是什么数据类型）
        var str = 'fx'; //str 字符类型
        // （重要）js 的变量数据类型是只有程序在运行过程中 根据等号右边的值来确定的

        // js 是动态语言 变量的数据类型是可以变化的
        var x = 10; // x 是数字型
        x = 'pink'; // x 是字符串型

数字型Number

<script>
        var num = 10; //num 数字型
        var PI = 3.14; //PI 数字型
        // 1.八进制 0 ~ 7 我们程序里面数字前面加 0 表示八进制
        var num1 = 010;
        console.log(num1); // 010 八进制 转换为10进制 就是8
        var num2 = 012;
        console.log(num2);
        // 2.十六进制 0 ~ 9  a ~ f      #ffffff 数字的前面加 0x 表示十六进制
        var num3 = 0x9;
        console.log(num3);
        var num4 = 0xa;
        console.log(num4);
        // 3.数字型的最大值
        console.log(Number.MAX_VALUE);
        // 4.数字型的最小值
        console.log(Number.MIN_VALUE);
        // 5.无穷大
        console.log(Number.MAX_VALUE * 2); //     Infinity 无穷大
        // 6.无穷小
        console.log(-Number.MAX_VALUE * 2); //     I-nfinity 无穷小
        // 7.非数字
        console.log('fx' - 100);  //NAN
    </script>

isNaN判断

isNaN() 这个方法用来判断非数字 并且返回一个值 如果是数字返回的是-false 如果不是数字返回的是ture

console.log(isNaN(12)); //false  是个数字  不是一个非数字
        console.log(isNaN('fx')); //turn 不是数字  是一个非数字

字符串型

1.字符串型元素

‘ture’ ‘哒哒’ ‘66’ 在引号内统一是字符串型

1.字符串引号嵌套 js 可以用单引号嵌套双引号 或者用双引号嵌套单引号（内单外双）（外单内双）
        var str = '我是一个"幽默"的程序员';
        console.log(str);

2.转义字符

// * \n 换行

​ // * \t 缩进

​ // * \ 斜杠\

​ // * ’ 单引号

​ // * " 双引号

​ // * \b 空格 b是blank的意思

​ // 我们先记住换行和空格 缩进就行

弹出网页警示框

alert('有志者事竟成，破釜沉舟，百二秦关终属楚；"嗨嘿嘿"\n苦心人天不负，卧薪尝胆，三千越甲可吞吴；');  （（alert 警示框）

字符串长度和拼接

1.检测获取字符串长度 length

var str = '我就是风暴！';
        console.log(str.length);//6 

2.(重要) 字符的拼接 + 只要有字符串和其他类型拼接 最终结果是字符串类型

console.log('近水' + '楼台');
        console.log('我才' + 18);
        console.log('fx' + true);
        console.log(12 + 12);
        console.log('12' + 12);
        // （重要）数值相加 字符相连

字符串加强

// - 我们惊常会将字符串和变量来拼接 因为变量可以很方便的修改里面的值

// - 变量是不能添加引号的 因为加引号的变量会变成字符串

// - 如果变量两侧都有字符串拼接 口诀“引引加加” 删除数字 变量写加号中间

console.log('破釜' + 18); //破釜18
        console.log('破釜' + 18 + '元'); //破釜18元
        var age = 18;
        console.log('破釜age元');
        //我们变量不要写到字符串里面 是通过和字符串相连的方式实现的
        console.log('破釜' + age + '元');
        // 变量和字符串相连的口诀 - 引引加加
        console.log('破釜 ' + age + ' 元');

显示年龄案例

<script>
        // 弹出一个输入框（pompt） 让用户输入年龄（用户输入）
        // 用户输入的值用变量保存起来 把刚才输入的年龄与所要输出的字符串拼接 （用户输入）
        // 使用alert语句弹出警示框(输出结果)
        var age = prompt('请输入你的年龄');
        var str = '你已经' + age + '岁了';
        alert(str);
    </script>

Boolean-undefined-null

boolean型

var flag = true; //flag 布尔型   代表真（对）
        var flag1 = false; //flag 布尔型  代表假（错）
        console.log(flag + 1); //true 参与加法运算当1来看
        console.log(flag1 + 1); //falese 参与加法运算当0来看
        console.log(flag + 'pink');  (相连）

undefined

// 如果一个变量声明未赋值 就是 undefined 未定义数据类型
        var str;
        console.log(str);
        var varible = undefined;
        console.log(varible + 'fengx'); //undefinedfengx
        console.log(varible + 1); //NaN  undefined 和数字相加 最后结果是NaN

null

// null 空值 (一个声明变量给null值 里面存储的值为空)（学习对象时，再研究null）
        var space = null;
        console.log(space + 'fengx'); //nullfengx
        console.log(space + 1); // 1

结：任何类型只要加 字符串都是相连

typeof检测变量数据类型

<script>
        var num = 10;
        console.log(typeof num); //number(数字型)
        var str = 'pink';
        console.log(typeof str); //string(字符型)
        var flag = true;
        console.log(