编写位置
我们的JS代码需要编写到<script>标签中。
我们一般将script标签写到head中。（和style标签有点像）
属性：
type：默认值text/javascript可以不写，不写也是这个值。
src：当需要引入一个外部的js文件时，使用该属性指向文件的地址。
js中var写与不写的区别
javascript声明变量的时候，虽然用var关键字声明和不用关键字声明，很多时候运行并没有问题，但是这两种方式还是有区别的。可以正常运行的代码并不代表是合适的代码。
JS中变量申明分显式申明和隐式申明。
Var i=100 显示申明
i=100 隐式申明
在函数中使用var关键字进行显式申明的变量是做为局部变量，而没有用var关键字，使用直接赋值方式声明的是全局变量。
当我们使用访问一个没有声明的变量时，JS会报错。而当我们给一个没有声明的变量赋值时，JS不会报错，相反它会认为我们是要隐式申明一个全局变量。
var num = 1是在当前域中声明变量. 如果在方法中声明，则为局部变量；如果是在全局域中声明，则为全局变量。
而num = 1，事实上是对属性赋值操作。
数据类型
JavaScript中一共有5种基本数据类型：
字符串型（String）
数值型（Number）包括整形和浮点型
布尔型（Boolean）
null型（Null）
undefined型（Undefined）
查看类型typeof
typeof 数 值 number
typeof 字符串 string
typeof 布尔型 boolean
typeof undefined undefined
typeof null object
类型转换
Number---->String
var a=123
方法1： b=a.toString()
方法2： c=String(a)
String---->Number
a='123'
方法一： b=parseInt(a)
方法二： c=parseFloat(a)
方法三： d=Number(a)
区别
Number()可以用来转换任意类型的数据，而后两者只能用于 转换字符串。
parseInt()只会将字符串转换为整数，而parseFloat()可以转换为浮点数
运算符
image.png
逻辑运行算符
一般情况下使用逻辑运算符会返回一个布尔值。
逻辑运算符主要有三个：非、与、或。
在进行逻辑操作时如果操作数不是布尔类型则会将其转换 布尔类型在进行计算。
非使用符号 ! 表示，与使用 && 表示，或使用 || 表示
image.png
自增和自减
var a=10;
b=a++; --------> b=10,a=11
var c=10;
d=++c;--------->d=11,c=11
自减类似
&&和||与&和|的区别
&& 和 & 的区别
&&和||是逻辑运算的，&和|是位运算的
他们最大的区别是，&& 和|| 是短路的，&和|不是短路的。
&&比较2个数遇到false返回false所代表的数
例如 1&&2 =>true&&true 结果为2
0&&2 =>false&&ture 0
&进行的是位运算
例如：2&3&6（每一列进行与运算，全是1为1，有0就为0）
0010
0011
0110
-------
结果为：0010=2，而2&&3&&6结果为6--->(true&&true&&true)返回最后一个true值，即6
再如：2&3&4
0010
0011
0100
0000=0，所以结果为0，而2&&3&&4结果为4
相等的几种情况比较
image.png
附录
css样式文件：
*{
margin: 0;
padding: 0;
}
.box1{
width: 602px;
height: 292px;
border: 1px solid #cccccc;
margin: 50px auto;
}
#s1{
display: inline-block;
font: bold 18px 微软雅黑;
color: #000;
padding: 13px 30px;
}
#s2{
margin: 0 20px 0 390px;
font: bold 14px 微软雅黑;
color: #cccccc;
}
.box2{
width: 562px;
height: 242px;
border-top: 1px solid #cccccc;
margin: 0 20px;
position: relative;
}
.box3{
width: 100px;
border-top: 2px solid red;
position: absolute;
left: 0;
top: -1px;
}
.box2 ul{
list-style: none;
margin-top: 10px;
}
.box2 li{
position: relative;
border-bottom: 1px solid #fcfcfc ;
}
.pic1{
margin: 15px 8px 15px 0;
}
.pic2{
margin: 5px 2px 8px 0px;
}
.box2 a{
text-decoration: none;
}
.span1{
font:14px 微软雅黑;
color: #000;
padding: -1px;
display: inline-block;
position: absolute;
top:7px
}
.span2{
font:14px 微软雅黑;
color: #000;
padding: -1px;
display: inline-block;
position: absolute;
left: 482px;
top:6px
}
html主文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/5.css">
</head>
<body>
<div class="box1">
<span id="s1">新闻列表</span>
<span id="s2">更多>></span>
<div class="box2">
<div class="box3"></div>
<ul>
<li><a href="#"><img class="pic1" src="image/dot.gif"><img class="pic2" src="image/icon.jpg"><span class="span1">桃花侠大战菊花怪</span><span class="span2">2018-09-13</span></a></li>
<li><a href="#"><img class="pic1" src="image/dot.gif"><img class="pic2" src="image/icon.jpg"><span class="span1">桃花侠大战菊花怪</span><span class="span2">2018-09-13</span></a></li>
<li><a href="#"><img class="pic1" src="image/dot.gif"><img class="pic2" src="image/icon.jpg"><span class="span1">桃花侠大战菊花怪</span><span class="span2">2018-09-13</span></a></li>
<li><a href="#"><img class="pic1" src="image/dot.gif"><img class="pic2" src="image/icon.jpg"><span class="span1">桃花侠大战菊花怪</span><span class="span2">2018-09-13</span></a></li>
<li><a href="#"><img class="pic1" src="image/dot.gif"><img class="pic2" src="image/icon.jpg"><span class="span1">桃花侠大战菊花怪</span><span class="span2">2018-09-13</span></a></li>
<li><a href="#"><img class="pic1" src="image/dot.gif"><img class="pic2" src="image/icon.jpg"><span class="span1">桃花侠大战菊花怪</span><span class="span2">2018-09-13</span></a></li>
</ul>
</div>
</div>
</body>
</html>
结果如下图：
新闻列表.png
网友评论