自学前端开发 第一天 - 开发成长日记

刘宇阳
251 阅读5分钟
2020年8月17号，天气晴

今天是我自学编程的第一天，我选择以JavaScript作为入门编程语言。

因为我迫不及待的想直接学JavaScript，HTML跟CSS对比JavaScript来说稍微简单些，所以就先简单学了H5C3的基础、常用标签以及样式。等到学精JavaScript后在回头深入一下H5C3

今天学习了JavaScript的组成、书写位置、注释 以及 输出方式 还有 变量

简单总结一下今天所学的知识点：

JavaScript的组成：

ECMAScript（JavaScript） ———— DOM ———— BOM

ECMAScript就是JavaScript / DOM是文档对象模型 / BOM是浏览器对象模型

如果我理解没有错的话：
DOM 主要以元素进行操作，例如：修改元素颜色、背景等等

而

BOM 主要以浏览器进行操作，例如：前进后退、刷新等等

————————————————

JavaScript的书写位置：
行内式 跟CSS行内一样，直接写在元素的内部。一般作为了解即可，除非特殊情况下使用

代码演示：

————————

**内嵌式** 跟CSS的style类似，将JS代码写在标签中

代码演示：
<script>
    alert('hello world');
</script>

————————

**外部式** 同样类似于CSS引入方式，将JS代码独立到HTML页面之外，既美观也方便复用

代码演示：
<script src="liuyuyang.js"></script>
需要注意的是外部式标签之间不能有任何代码

如果script标签之间写上代码是不起作用的：
<script src="liuyuyang.js">
    alert('hello world') //不起任何作用
</script>
————————————————

JavaScript的注释：

注释没什么可说的，凑个字数吧
**// 行注释** 快捷键：Ctrl + /
代码演示：
// alert('行注释')
————
**/* 块注释 */** 快捷键：Shift + Alt + a
代码演示：
/* alert('块注释')
alert('块注释')
alert('块注释') */
————————————————

JavaScript的输出方式：
  1. alert() 在弹出框输出
  2. console.log() 在控制台输出
  3. document.write() 在页面中输出

————————————————

JavaScript变量：

变量简单理解为：是一个存装数据的一个盒子

接下来就是变量的使用，使用分为两步

首先声明变量（var）然后定义变量名（name）最后赋值（liuyuyang）

var 是JS的关键字，用来声明变量

代码演示：
var name = "liuyuyang";
————————

变量获取数据的过程我的理解是这样的：

————

  1. 首先声明变量
  2. 然后计算机会自动分配一个内存空间，也就是分配了一个盒子
  3. 接着给变量取个名字，也就是给盒子取了一个名字
  4. 下一步给变量赋值，也就是给盒子增添了数据
  5. 最后如果想要输出数据，就根据指定的变量名找到指定的盒子，从盒子中获取相应的数据

代码演示：
var name = "liuyuyang";
console.log(name) //输出name这个变量
————

需要注意的是如果有两个相同名字的变量，则最后面的变量会覆盖掉前面的变量数据。简单来说就是以最后一次赋的值为准

代码演示：
var age = 17;
var age = 18;
console.log(age); //把之前的变量值17覆盖为18
————

同时声明多个变量，只需要写一个var即可。多个变量名之间以英文逗号分隔开。

例如：我想要创建这三个变量 a=1 b=2 c=3

原写法
var a = 1;
var b = 2;
var c = 3;

多个写法
var a = 1,b = 2,c = 3;
————

还有就是学习了声明变量的特殊情况
情况
说明
结果
var age ; console.log (age);
只声明 不赋值
undefined
console.log(age)
不声明 不赋值 直接使用
报错
age = 10; console.log (age);
不声明 只赋值
10

————

接下来学习了变量的命名规范

  1. 变量命名以字母、数字、下划线、美元符号组成。例如：usrAge, num01, _name, $num
  2. 变量命名不能以数字开头
  3. 变量命名要有意义。例如年龄 ——> age
  4. 变量命名不能 是系统关键字、保留字。例如：var、for、while
  5. 变量命名严格区分大小写。例如：var app; 和 var App; 是两个变量

————

最后呢写了个交换变量的案例，也不算太难。给大家分析一下我的做法吧：

案例：var a = 1, b = 2; 让a的值跟b的值交换过来

实现过程：

  1. 首选声明一个临时变量（c）用来临时存放数据
  2. 让变量a的值赋值给临时变量c
  3. 此时变量c的值是1 再用变量b的值赋值给变量a的值
  4. 此时变量a的值就是 2 再用临时变量存储的之前变量a的值赋值给变量b
  5. 大功告成。此时a就等于2，b=1了

var a = 1, b = 2; var c = a, a = b , b = c; console.log(a,b)

简单理解：

比如说你有两个杯子，里面都装有不同的饮料。A杯子装的雪碧 / B杯子装的可乐

如果你想把雪碧装在B可乐杯子里，然后可乐装在A雪碧杯子里。你就需要拿出第三个杯子（C空杯子，用于临时存饮料），先将A杯子中雪碧的水倒入到C空杯子里面，然后B杯子里的可乐在倒入到A雪碧的杯子里（目前A杯子的雪碧倒入到了C空杯子里面了，所以当前A杯子是空的）紧接着用C空杯子把里面的雪碧倒入到B杯子里面，此时B杯子里的饮料是雪碧而A杯子里的饮料就是可乐了。

————————————————

加油，目标架构师
avatar
文章
阅读
粉丝