今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）
1、学习了javascript的基本的一些语法（补充前面的）。
2、把任务一的页面用flex重写了一遍。因为用float来写的九宫格，所以需要清除浮动，避免高度塌陷。
3、按照任务步骤写两个按钮的样式，了解了写鼠标事件onload事件和事件的种类之间的区别；
1、语法：
（1）语句：每一行就是语句，一行一行的执行。是为了完成某种任务而进行的操作。
var a= 1+3；
这里var是声明变量命令；
a是变量名；
1+3是表达式，只一个为了得到返回值的计算方式。它的运算结果返回赋值给变量a。
可以分号结尾，javascript会视其为空语句。如：；；；这就代表三个空语句。
注意：表达式不需要分号结尾，一旦用分号结尾会让javascript引擎视其为语句从而产生无意义的语句。
（2）变量：就是为值取名，然后引用这个名字就等同于引用这个值。变量的名字就是变量名。
var a=1；
这里意思是先用var声明变量命令变量a，然后在变量a与数值1建立引用关系，再把数值1“赋值”给变量a。所以，只要引用变量a就能得到数值1。
注意，JavaScript 的变量名区分大小写，A和a是两个不同的变量。
情况1：var a=1；
a='hello'；
这里var已经声明一个变量，所以第二个变量不需要声明。
情况2：var x=1；
var x；
x // 1
这里var重复声明一个已经存在的变量会显示无效。
情况3：var x=1；
var x=2；
//等同于
var x=1；
var x；
x=2；
这里意思为第二次声明重新赋了一个新值，则会覆盖第一个声明的值。所以下面得出x=2这个值。
（3）区块：JavaScript 使用大括号，将多个相关的语句组合在一起，称为“区块”（block）。
对于var命令来说，JavaScript 的区块不构成单独的作用域（scope）
{
var a = 1；
}
a // 1
这里意思是var在区块内部命令声明赋值，就算在区块外部，变量a赋值依然有效。 区块往往用来构成其他更复杂的语法结构，比如for、if、while、function等。
（4）条件语句：JavaScript 提供if结构和switch结构，完成条件判断，即只有满足预设的条件，才会执行相应的语句。
1、if结构
if (布尔值)
语句;
// 或者
if (布尔值) 语句;
上面是if结构的基本形式。需要注意的是，“布尔值”往往由一个条件表达式产生的，必须放在圆括号中，表示对表达式求值。如果表达式的求值结果为true，就执行紧跟在后面的语句；如果结果为false，则跳过紧跟在后面的语句。
注意，if后面的表达式之中，不要混淆赋值表达式（=）、严格相等运算符（===）和相等运算符（==）。尤其是赋值表达式不具有比较作用。
if...else结构
if (m === 3) {
// 满足条件时，执行的语句}
else {
// 不满足条件时，执行的语句}
上面代码判断变量m是否等于3，如果等于就执行if代码块，否则执行else代码块。
else代码块总是与离自己最近的那个if语句配对。
if...switch结构
注意的是，每个case代码块内部的break语句不能少，否则会接下去执行下一个case代码块，而不是跳出switch结构。
三元运算符?:
avaScript还有一个三元运算符（即该运算符需要三个运算子）?:，也可以用于逻辑判断。
(条件) ? 表达式 1 : 表达式 2
上面代码中，如果“条件”为true，则返回“表达式1”的值，否则返回“表达式2”的值。
这个三元运算符可以被视为if...else...的简写形式，因此可以用于多种场合。
（4）循环语句： 循环语句用于重复执行某个操作，它有多种形式。
while 循环
While语句包括一个循环条件和一段代码块，只要条件为真，就不断循环执行代码块。
while (条件)
语句;
// 或者
while (条件) 语句;
while语句的循环条件是一个表达式，必须放在圆括号中。代码块部分，如果只有一条语句，可以省略大括号，否则就必须加上大括号。
while (条件) {
语句;
}
for 循环
for语句是循环命令的另一种形式，可以指定循环的起点、终点和终止条件。它的格式如下。
for (初始化表达式; 条件; 递增表达式)
语句
// 或者
for (初始化表达式; 条件; 递增表达式) {
语句
}
for语句后面的括号里面，有三个表达式：
初始化表达式（initialize）：确定循环变量的初始值，只在循环开始时执行一次。
条件表达式（test）：每轮循环开始时，都要执行这个条件表达式，只有值为真，才继续进行循环。
递增表达式（increment）：每轮循环的最后一个操作，通常用来递增循环变量。
for语句的三个部分（initialize、test、increment），可以省略任何一个，也可以全部省略
do...while 循环
do...while循环与while循环类似，唯一的区别就是先运行一次循环体，然后判断循环条件。
do
语句
while (条件);
// 或者
do {
语句
} while (条件);
不管条件是否为真，do...while循环至少运行一次，这是这种结构最大的特点。另外，while语句后面的分号注意不要省略。
break语句：用于跳出代码块或循环。
for循环也可以使用break语句跳出循环。
continue语句： 用于立即终止本轮循环，返回循环结构的头部，开始下一轮循环。
如果存在多重循环，不带参数的break语句和continue语句都只针对最内层循环。
共同点：break语句和continue语句都具有跳转作用，可以让代码不按既有的顺序执行。
2、为什么要清除浮动？
因为当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。所以当包含框的高度小于浮动框的时候，此时就会出现“高度塌陷”。
清除浮动的方法：
最主流的当然是::after伪元素。其实关于清除浮动的代码主要就是围绕clear:both和如何隐藏content。
3、然后就是开始写按钮的样式，查看相关资料，onload事件和mouse鼠标事件以及鼠标相关的事件；
学习onload事件：
定义和用法：onload事件会在页面或图像加载完成后立即发生。
语法：onload="SomeJavaScriptCode"
SomeJavaScriptCode参数是必需。规定该事件发生时执行的javascript。
支持onload事件的HTML标签有七个：
<body>，<frame>，<frameset>，<iframe>，<img>，<link>，<script>
支持onload事件的javascript对象有三个：
image，layer，window
mouseevent的接口：
click点击事件：按下鼠标时触发条件；
dblclick：同一元素上双击鼠标时触发；
这两者一个是单击，一个是双击；
包含下面的动作：
mousedown：按下鼠标时触发；
mouseup：释放按下鼠标时触发；
这两个是一对相反的动作事件。
在click事件中，用户一般是先执行mousedown按下动作，在执行mouseup释放动作，click最后才触发；
双击dblclick事件是在单击click触发之后执行。
mousemove：在一个节点内部持续移动，会连续触发该事件；
mouseenter：进入一个节点时触发，进入子节点不会触发；
mouseover：进入一个节点时触发，进入子节点会再一次触发；
两者的区别：enter是能触发一次，并且只能在节点内部移动；
over是可以在子节点上触发多次。
mouseout：离开一个节点时触发，离开父节点也会触发；
mouseleave：离开一个节点是触发。离开父节点不会触发；
contextmenu：按下鼠标右键时（上下文菜单出现前）触发，或者按下“上下文菜单键”时触发。
wheel：滚动鼠标的滚轮时触发，该事件继承的是WheelEvent接口。
明天计划的事情：（一定要写非常细致的内容）
开始为按钮添加鼠标click点击事件，今天这一块其实看得也是理解了皮毛，
然后按照师兄的建议开始画流程图，然后在细化流程图，每个功能分开再组成一体。
在按照流程开始码代码。
遇到的问题：（遇到什么困难，怎么解决的）
看了相关资料，但是对于代码的解读还是摸不到思路。
收获：（通过今天的学习，学到了什么知识）
大概有一些头绪，例如：那个开始闪的按钮和结束闪的按钮，这个是需要用function函数结合数组还有运算符这些组合成js代码去运行，然后click是鼠标触发事件。开始闪需要选中九宫格然后改变原有的颜色，赋值新的颜色，结束闪就需要清除掉所有颜色，恢复到原来的颜色。这些也是看了师兄的成果，然后得出来的结论。但是怎么用代码的形式表现出来，我还是不会。。。
返回列表
评论