2018-09-28
编写位置
我们的JS代码需要编写到标签中。
我们一般将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
vara=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>Title新闻列表更多>>
- 桃花侠大战菊花怪2018-09-13
- 桃花侠大战菊花怪2018-09-13
- 桃花侠大战菊花怪2018-09-13
- 桃花侠大战菊花怪2018-09-13
- 桃花侠大战菊花怪2018-09-13
- 桃花侠大战菊花怪2018-09-13
