发表于: 2018-11-24 22:08:12

1 899


今天完成的事情:今天学习了 

JavaScript 语法

JavaScript 是一个程序语言。语法规则定义了语言结构。

JavaScript 是一个脚本语言。

它是一个轻量级,但功能强大的编程语言。

数字(Number)字面量 可以是整数或者是小数,或者是科学计数(e)。

字符串(String)字面量 可以使用单引号或双引号 :"John Doe"

表达式字面量 用于计算:5 + 6 5 * 10

数组(Array)字面量 定义一个数组:[40, 100, 1, 5, 25, 10]

对象(Object)字面量 定义一个对象:{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

函数(Function)字面量 定义一个函数:function myFunction(a, b) { return a * b;}

JavaScript 变量

在编程语言中,变量用于存储数据值。

JavaScript 使用关键字 var 来定义变量, 使用等号来为变量赋值:

var x, length 
x = 5 
length = 6

JavaScript 操作符

JavaScript使用 算术运算符 来计算值:(5 + 6) * 10 

JavaScript使用赋值运算符给变量赋值:

x = 5 
y = 6 
z = (x + y) * 10

赋值,算术和位运算符 =  +  -  *  / 在 JS 运算符中描述

条件,比较及逻辑运算符 ==  != <  > 在 JS 比较运算符中描述

JavaScript 语句是发给浏览器的命令。

这些命令的作用是告诉浏览器要做的事情。

分号 ;

分号用于分隔 JavaScript 语句。

通常我们在每条可执行的语句结尾添加分号。

使用分号的另一用处是在一行中编写多条语句。

JavaScript 代码是 JavaScript 语句的序列。

浏览器按照编写顺序依次执行每条语句。

JavaScript 可以分批地组合起来。

代码块以左花括号开始,以右花括号结束。

代码块的作用是一并地执行语句序列。

JavaScript 会忽略多余的空格。您可以向脚本添加空格,来提高其可读性。

可以在文本字符串中使用反斜杠对代码行进行换行。

我们可以添加注释来对 JavaScript 进行解释,或者提高代码的可读性。

单行注释以 // 开头;注释用于阻止其中一条代码行的执行(可用于调试)。

多行注释以 /* 开始,以 */ 结尾;注释用于阻止代码块的执行(可用于调试)。
注释放到代码行的结尾处 var x=5;    // 声明 x 并把 5 赋值给它 

JavaScript 变量

变量是用于存储信息的"容器"。

与代数一样,JavaScript 变量可用于存放值(比如 x=5)和表达式(比如 z=x+y)。

变量可以使用短名称(比如 x 和 y),也可以使用描述性更好的名称(比如 age, sum, totalvolume)。

  • 变量必须以字母开头
  • 变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)
  • 变量名称对大小写敏感(y 和 Y 是不同的变量)

JavaScript 变量有很多种类型,但是现在,我们只关注数字和字符串。

当您向变量分配文本值时,应该用双引号或单引号包围这个值。

当您向变量赋的值是数值时,不要使用引号。如果您用引号包围数值,该值会被作为文本来处理。

在 JavaScript 中创建变量通常称为"声明"变量。

我们使用 var 关键词来声明变量

变量声明之后,该变量是空的(它没有值)。

如需向变量赋值,请使用等号

也可以在声明变量时对其赋值

可以在一条语句中声明很多变量。该语句以 var 开头,并使用逗号分隔变量即可

在计算机程序中,经常会声明无值的变量。未使用值来声明的变量,其值实际上是 undefined。

如果重新声明 JavaScript 变量,该变量的值不会丢失

变量脑图:

然后开始编写任务四导航栏部分,用纯css写,其实是一个手风琴菜单:

 <style>
* {
margin: 0;
padding: 0; }
ul li {
list-style: none; }
input {
display: none; }
.box ul > li {
position: relative; }
label {
display: block;
width: 200px;
text-indent: 40px;
background: linear-gradient(#f9f9f9, #e4e4e4, #d4d4d4);
font: 14px/40px "微软雅黑"; }
label + ul {
width: 180px;
overflow: hidden;
background: #f5f5f5;
padding: 10px;
display: none;
font: 12px/30px "微软雅黑"; }
label::before {
content: '-';
font-size: 20px;
position: absolute;
top: 0;
left: -24px; }
#checkbox1:checked ~ ul {
display: block; }
#checkbox2:checked ~ ul {
display: block; }
#checkbox3:checked ~ ul {
display: block; }
#checkbox4:checked ~ ul {
display: block; }
#checkbox1:checked + label::before {
content: '+'; }
#checkbox2:checked + label::before {
content: '+'; }
#checkbox3:checked + label::before {
content: '+'; }
#checkbox4:checked + label::before {
content: '+'; }
/*# sourceMappingURL=07style.css.map */
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<input type="checkbox" id="checkbox1">
<label for="checkbox1">洋魔方保障</label>
<ul>
<li>支付宝快捷支付</li>
<li>支付宝余额支付</li>
<li>新手入门</li>
</ul>
</li>
<li>
<input type="checkbox" id="checkbox2">
<label for="checkbox2">新手帮助</label>
<ul>
<li>申请支付宝</li>
<li>支付宝充值</li>
</ul>
</li>
<li>
<input type="checkbox" id="checkbox3">
<label for="checkbox3">支付方式</label>
<ul>
<li>支付宝快捷支付</li>
<li>支付宝余额支付</li>
<li>新手入门</li>
</ul>
</li>
<li>
<input type="checkbox" id="checkbox4">
<label for="checkbox4">商家支持</label>
<ul>
<li>洋魔方规则</li>
<li>国际招商</li>
<li>服务商招募</li>
<li>商家系统对接</li>
<li>联系我们</li>
</ul>
</li>
</ul>
</div>


明天计划的事情:继续学习js基础 同时编写任务14-15
遇到的问题:手风琴菜单思路找不到, 费了不少时间
收获:学到了css的新思路


返回列表 返回列表
评论

    分享到