js基础第一天

js作用：网页特效（电梯导航）、交互、表单特效。就是可以用来控制结构和样式。

常用的三个输出语句都属于js的内置对象，提供我们直接使用的功能就是内置对象功能。

web三标准：结构、样式、行为。而js主要控制结构和样式。

<script></script>

alert()弹出警示框（用的少，用户体验差）

window.alert(“执行语句”);也可以直接alert(“执行语句”);

console控制台输出（用户看不见）

正常输出console.log(“你好”);

警告输出console.warn(“注意”);

错误提示console.error(“这里错了”);

document.write()文档打印输出（直接在文档中显示，常用）

document.write(“今天下雪了”);

如何用js控制结构和样式？

首先要获取id，给一个id然后获取元素，获取方式:

var demo_huoqu=getElementById(“demo”);

意思是获取id为demo的元素放在demo_huoqu这个变量里。

然后更改样式：

document.getElementById(“demo”).style.backgroundColor=”red”;

意思是更改原样式中的颜色为红色。

js中样式的写法与CSS不一样

CSS：backgrount-color

js:backgroundColor(没有-，同时第二个单词首字母大写)

变量命名

变量名必须以字母或是下标符号_或者$开头；长度不能超过255字符；不允许使用空格；不使用脚本语言中保留的关键字及保留符号作为变量名；变量名严格区分大小写。

全局变量和局部变量

全局变量：外部设置变量、隐式的全局变量（在函数体内部但是没有声明var的也是全局变量）

result为全局变量，num也为全局变量。

局部变量：内部设置var变量

题：

输出为10，因为函数没有调用，没有fun()调用，所以为10

输出为global。a=”global”为全局变量，但是是局部调用的，所以局部执行，执行输出为global。

事件三要素（事件源+事件=事件处理程序）

事件源.事件= function(){ 事件处理函数 }

事件源 事件 事件处理函数

被触发者 怎么触发这个事情 发生了什么事

先获取盒子和按钮的id，然后当按钮被按时发生了盒子的样式宽度改变。

鼠标事件

事件名	说明
onclick	鼠标单击
ondblclick	鼠标双击
onkeyup	按下并释放键盘上的一个键时触发
onchange	文本内容或下拉菜单中的选项发生改变
onfocus	获得焦点，表示文本框等获得鼠标光标。
onblur	失去焦点，表示文本框等失去鼠标光标。
onmouseover	鼠标悬停，即鼠标停留在图片等的上方
onmouseout	鼠标移出，即离开图片等所在的区域
onload	网页文档加载事件
onunload	关闭网页时
onsubmit	表单提交事件
onreset	重置表单时

隐藏样式

display:none;隐藏（隐藏不占位置，使用后下面的会上浮）

display:block;显示，因为变为块级元素所以肯定会显示。

visibility:hidden;隐藏（隐藏但占位置，上面的位置存在，下面不会顶上来）

visibility:visible;显示

overflow:hidden;隐藏超出的部分

入口函数

window.onload=function() {

内部放js

}

这个函数的意思就是说，当我们页面结构样式加载完毕之后，才去执行函数体里面的js部分。所以这句话可以放到页面的顶端。同时一个页面只能写一次。

js的书写位置

行内式

<button onclick="alert('你好吗')">点击我</button>

<a href=”javascript:;”></a>

<a href=”javascript:void(0);”></a>

当点击的时候，js执行一个空的函数，如果换成#，那么就会跳转。

内嵌式

写在页面中任何地方都可以<script type=”text/javascript”></script>

外连式

在head中写<script type=”text/javascript” src=”xx.js” ></script>

这对标签之中不可以写任何东西

用js更换背景图片的方法

body {
     background: url(images/2.jpg) top center;
}

window.onload=function() {

var _li1=document.getElementById("li1");

var _li2=document.getElementById("li2");

var _li3=document.getElementById("li3");

var _bd=document.getElementById("bd");

_li1.onclick=function() {

_bd.style.backgroundImage="url(images/3.jpg)";

}

_li2.onclick=function() {

_bd.style.backgroundImage="url(images/4.jpg)";

}

_li3.onclick=function() {

_bd.style.backgroundImage="url(images/5.jpg)";

}

}

首先为什么要用backgroundImage 而不用background呢？其实也可以，但是前面的只换图片不换样式，如果想用后面的，还得再加上样式to center。其次还需要加url以及后面的内容才行，不能够直接images/5.jpg直接放上去，这种方法是直接引入图片，而现在则是在样式中的图片，所以要写全。

模态框

CSS样式部分

<div di="mask">
</div>
<div di="box">
     <span>×</span>
</div>

#mask {/*模态框*/
     height: 100%;
     width: 100%;
     position: fixed;/*需要用固定定位，将模态框固定在屏幕永远不动*/
     background: rgba(0,0,0,.5);/*设置透明度*/
     z-index: 999; /*设置时要比前面的框低一级一般设为999*/
     display: none;
}
#box {/*弹出的表单框*/
     width: 400px;
     height: 250px;
     background-color: #fff;
     position: fixed;/*框固定到屏幕永远不动*/
     top: 50%;/*框上面的线到屏幕竖直居中的位置*/
     left: 50%;/*框左边的线到屏幕水平居中的位置，也就是正**/
     margin: -125px 0 0 -200px;/*由于以上面和左边的线为准，所以框会偏下右各一半，所以需要设置框margin的上为负高一半，左为负宽一半，最后正好居*。*/
     z-index: 1000;/*设置层级比模态框高一级*/
     display: none;
}
#box span {
     position: absolute;
     top: 10px;
     right: 10px;
     width: 15px;
     height: 15px;
     font-size: 15px;
     cursor: pointer;
}

js特效部分

login是您好请登录的a标签，mask是模态框，box是中间的白色表单，close_box是关闭框

<script type="text/javascript">
     window.onload=function() {
         var login=document.getElementById("login");
         var mask=document.getElementById("mask");
         var box=document.getElementById("box");
         var close_box=document.getElementById("close_box")
         login.onclick=function() {
             mask.style.display="block";
             box.style.display="block";
         }
         close_box.onclick=function() {
             mask.style.display="none";
             box.style.display="none";
         }
     }
</script>

padding问题

给一个盒子长宽高颜色，如果给padding肯定会撑开盒子。而在这个盒子中包含一个小盒子，小盒子只设高，宽会继承父亲的宽。就算是加了padding-left值也不会撑开自己，因为自己没有设宽度值。当给小盒子设了宽度值例如width为50px或者为100%，那么再给padding-left时就会撑开自己比父盒子宽。同理因为给了高的值，所以如果加padding-top值是也会撑开自己比父盒子高。

数据类型

字符型string、数值型number、布尔型boolean、null、undefind（未定义）

输出类型方法，例如

var txt=”欢迎光临”;

console.log(typeof txt);

结果为string

转换为字符型：加双引号、String(); 转换字符S一定要用大写。字符型的可以减可以乘可以除。

布尔型：true和false。转换布尔型：！！、Boolean();

false、undefined、null、0、””等为false

“somestring”/[bobject]为true

转换数值型：减- 乘* 除/ 都可以转换，除了加+。利用Number();转换。

八进制：数值的前面带0代表八进制。

var num=020;

结果是16，八进制转为十进制。

算法0*8⁰+2*8¹=16

十六进制：数值的前面带0x代表十六进制。

var num=0xb;

结果11

取整

parseInt

parseInt(值，进制)；

parseInt(19.99); 是19

parselnt(“25px”); 是25

parselnt(“px25px”); 是NaN

parseInt(“10”,2); 10的2进制。意思是把10这个2进制转换为10进制。0*2⁰+1*2¹=2

parseInt(“110”,2) 0*2⁰+1*2¹+1*2²=6

转为整数：var num=parseInt(“str”)

读取字符串中的整数部分

从第一个字符向后读。

如果碰到第一个数字字符，开始获取数字，再次碰到不是数字的字符（包括小数点），停止读取。

如果开头碰到空格，忽略。

如果碰到的第一个非空格字符，不是数字说明不能转→NaN，NaN的意思是Not a Number。什么是NaN：不是数字（内容）的数字（类型）

转为浮点数：var num=parseFloat(“str”)

读取字符串中浮点数部分。

用法和parseInt完全相同

唯一差别：parseFloat认识小数点，仅认第一个。而且parseFloat如果能转成整数，就不会转为浮点数，例如25.0，那么就会转为25，.25转为0.25