2021-11-05 前端学习

浏览器执行执行JS

浏览器本身不会执行js代码，而是通过内置js引擎（解释器）来执行js代码

js组成

ECMAscript（Javascript语法），DOM（页面文档对象模型），BOM（浏览器对象模型）

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

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

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

JS书写位置

1. 行内式
   写在body标签里面

• 可以将单行或少量JS代码写在HTML标签的事件属性中（以on开头的属性），如onclick
• 注意单双引号的使用：在HTML中我们推荐使用双引号，JS中我们推荐使用单引号
• 可读性差，在HTML中编写JS大量代码时，不方便阅读；
• 引号易错，引号多层嵌套匹配时，非常容易弄混；
• 特殊情况下使用

2. 内嵌式
   在body标签上边添加标签里面写

3. 外部JS文件
   在外面创建一个js文件，在相应的HTML文档用引用进来便可使用，引用方式

<script src="引用JS的文件地址"></script>

• 利于HTML页面代码结构化，把大段JS代码独立到HTML页面之外，既美观，也方便文件级别的复用
• 引用外部JS文件的script标签中间不可以写代码
• 适合JS代码量比较大的情况
• 推荐使用

注释

1. 单行注释 快捷键Ctrl + /
2. 多行注释 默认快捷键shift + Alt + a

Javascript输入输出语句

方法	说明
alert（msg）	浏览器弹出警示器
console.log（msg）	浏览器控制台打印输出信息
prompt（info）	浏览器弹出输入框，用户可以输入

例子：

<script>
        //输入框
        prompt('请输入年龄');
        //alert弹出警示框 输出的 展示给用户的
        alert('计算结果是');
        //console 控制台输出 给程序员看的
        console.log('我是程序媛');
    </script>

变量

变量概述
白话：变量就是一个装东西的盒子。
通俗：变量是用于存放数据的容器。我们通过变量名获取数据，甚至数据可以修改。
本质：变量是程序在内存中申请的一块用来存放数据的空间
类似酒店房间，一个房间就可以存放一个房间号

变量的使用
变量在使用时分为两步：1. 声明变量 2. 赋值

1. 声明变量

//声明变量
var age； //声明一个名称的变量为age的变量

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

2. 赋值

age= 10  //给age这个变量赋值为10

• “=”用来把右边的值赋给左边的变量空间中 此处代表赋值的意思
• 变量值是程序员保存到变量空间里的值

3. 变量的初始化

var age = 18； //

变量使用-案例
题：输入名字，并且弹框出现输入信息

var myname = prompt('姓名');
alert(myname);

1.4 变量语法扩展

1. 更新变量

var age = 18；
age = 81； //最后的结果就是81把18覆盖掉

2. 同时声明多个变量
   只需要写一个var，多个变量名之间使用英文逗号隔开。

var age = 18, address = ‘火影村’, sex = 2;

3. 声明变量特殊情况

情况	说明
var age; console.log(age);	只声明不赋值 结果- undefined
console.log(age)	不声明 不赋值 直接使用 结果 - 报错
age = 10;console.log(age)	不声明 只赋值 结果 - 10

变量小结
5. 为什么需要变量？
因为我们一些数据需要保存，所以需要变量。

6. 变量是什么？
   变量就是一个容器，用来存放数据的，方便我们以后使用里面的数据

7. 变量的本质是什么？
   变量是内存里的一块空间，用来存储数据。

8. 变量怎么使用？
   我们使用变量的时候，一定要用声明变量，然后赋值
   声明变量本质是去内存申请空间，用var

9. 什么是变量的初始化？
   声明变量并赋值我们称之为变量的初始化。

10. 变量命名规范有哪些？
    变量名尽量要规范，见名知意——驼峰命名法

11. 变换2个变量值的思路？
    例题：将red中的红苹果与green中的青苹果交换？
    思路，准备三个容器（变量），一个装红苹果，一个装青苹果，一个空，先把青苹果放在空 容器中，然后再把红放在已空的原青苹果容器中，最后把原为空容器中的青苹果放在原红苹果中。
    代码入下

var red = '红苹果';
var green= '青苹果';
var white; //用一个空的容器用于交换

white = green; // 青苹果转移到white容器（变量）中
green = red；; // 红苹果转移到青苹果容器（变量）中
red = white;  //青苹果转移到红苹果容器（变量）中
console.log(red，green，white);