Day03-JavaScript01
JS的简介
什么是js
javascript简称js，是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，“寄生”在html体内随网络传输到客户端的浏览器的内存中解析。（html的加载也是从上往下加载的）
脚本语言脚本：电影或电视剧的拍摄时候的剧本底稿。/计算机中的脚本，给计算机看。脚本中包含一些给计算机的指令。Java和C语言，都需要编译成二进制的可执行文件。脚本文件是不需要编译，直接可以使用解释器进行解释执行！百度的解释：脚本语言又被称为扩建的语言，或者动态语言，是一种编程语言，用来控制软件应用程序，脚本通常以文本（如ASCII)保存，只在被调用时进行解释或编译。
js是 基于对象 和 事件驱动 的脚本语言。
基于对象：不支持继承！ 并且其中内置了许许多多的对象事件驱动：无事件，不js，没有事件就无法执行js代码。点击事件，前进后退、滑动、提交等等事件。
js的作用（常见）
js可以动态的修改html及css的代码（修改的是浏览器内存中的那一份代码，服务器端的文件是没有变化的）
js可以对表单进行校验 （最初开发出来js就是拿来校验表单的）
js的组成部分（理解）
1.ECMAScript：这一部分主要是js的基本语法
2.BOM：Browser Object Model 浏览器对象模型，主要是获取浏览器信息或操作，例如：浏览器的前进与后退、浏览器弹出提示框、浏览器地址栏输入网址跳转等操作等（window最常用，然后还有Navigator，Screen，History，Location）
3.DOM：Document Object Model 文档对象模型，此处的文档暂且理解为html，html加载到浏览器的内存中，可以使用js的DOM技术对内存中的html节点进行修改，用户从浏览器看到的是js动态修改后页面
js的引入方式（重点）
行内脚本: 在html标签中写类似onclick点击事件，然后再在后方的引号中引入函数，也就是写入了js代码；
<
div>
<input type=
"button" name=
"name" value=
"点我" onclick=
"alert('成功输出了')"
</
div>
内部脚本，也叫内嵌脚本； 语法：写一个script标签，然后在其中写js代码
<script>
</script>
外部脚本 在html文件之外，创建一个 .js结尾的文件，在该文件中js代码，然后通过<script>标签的src属性引入到了html文件中。（和css不同，css的外部引入方式是通过<link>标签（的href属性）引入到html中的，而js是通过<script>标签引入到html中的。）
<script src="../img/js/test.js" type="text/javascript" >
</script>
注意：负责引用外部脚本的script标签中不能够写js代码。如果要写js代码，应该另外单独写一个<script>标签
js的数据类型
js中的注释
<script>标签中的注释和java类似，// 或/* */
基本数据类型 （五种）
数字类型：number布尔类型：boolean字符串类型：string未定义：undefined ，就是没有声明的变量空类型：null （object） ，就是根本不存在的变量
查看类型的方式：typeof
alert（
typeof i ）；
变量的声明： 使用关键字var进行声明：
var 变量名 =
变量值；
实际上，有些情况中不使用var进行变量声明也是可以的，因为js中会默认把这个变量进行声明； 没有用var声明的，而直接使用的变量是全局变量； 用var声明的，在局部代码块中的，就是局部变量。如果用var声明的变量，但是不在任何一个函数中，那么这个变量也是全局变量
引用数据类型
跟Java中一样，js中的对象类型都是引用数据类型
var obj = new Object();var str = new String();var date = new Date();
引用数据类型全为object类型
类型之间的转换
number和boolean转换成string，用的是toString（）方法
var i =
3.14;
var str = i.toString();
string转number（重要）: parseInt()方法和parseFloat() 方法，其实这两种方法在调用前省略的是window对象
parseInt（str）
var str =
"3.14";
var num =
parseInt(str);
var num = window.parseInt(str);
number、string转boolean。（重要）new Boolean()方法 number转化为boolean：0为false，非0为true；
var num =
3.14;
var res =
new Boolean(num);
string 转化为boolean: 空串为false ，非空为true；
var str =
"false"
var res =
new Boolean(str);
js中的对象数据object类型： js中只要是用new创建的，都是object类型 var date = new Date(); alert( typeof date);
js中的运算符
赋值运算符 var num = 5;比较运算符
> 大于
< 小于
== 比较数据大小
= 赋值
!=
=== 比较数据大小和内容
逻辑运算符，在js中没有单与和单或 * && * || * ! * 算数运算符 * + * - * * * / * % * 三元运算符 * 条件?a:b
js中比较特殊的运算符
1）运算符 == 和运算符 === ==比较的数据的大小，默认情况下，==运算符会将左右两端的变量尝试着进行转型，看是否能够相等。
===比较的数据的大小和类型。必须要值和类型都相同的时候才能够相等。
2）js中只有&& 和| | 运算符，没有单与和单或运算符；
3）三元运算符： java中的三元运算符只能够进行赋值操作，但是js中可以用语句,可以将语句体写在三元运算符中。 例：
（3>5）?
alert("正确") : alert("错误") ;
js中比较特殊的语句
1）js定义的数组 在数组中可以写上任何数据类型的变量； 注意，**与java中不同的是，js中定义数组用的是方 var arr = [ 1, 2, “哈哈哈” ， true]；定义数组和java中用的符号不一样 java中：
int[ ] a =
{ 1, 2, 3, 4};
而js中用的是方括号：
var a =
[ test, 1, 2, 3];
2）for in循环 其实本质上就是java中的增强for循环，区别是for in循环遍历出来的是所有的下标。
for （
index in arr）{
alert（ arr[
index]）；
}
js中的函数
作用：封装一些功能实现
js中定义函数的三种方式（前两种是重点）
一般方式:参数不能够写var,否则会报错
function fn(a,b){
alert（a+b）;
}
//调用函数
onclick="fn(4,6)";
匿名函数 （匿名函数的创建是不用new的，只有对象方式创建函数的时候才new）
function(a,b){
alert(a-b);
}
var fn1 =
function(a,b){
alert(a-b);
}
fn1(
8,
3);
绑定事件的第二种方式的时候使用到。匿名函数只能够写在<script>中，不能够写在行嵌套的script中。 * 对象方式 对象方式，用的时候很少
var fn =
new function( 'a', 'b', 'alert(a+b)' )
可以有多个参数，最后一个参数是函数体；
js中的函数还是会有局部函数和全局函数的区别的，如下例： 下面这个例子中也有匿名函数
<script>
window.onload = function(){
function changePic(){
}
}
</script>
如上述所示，函数changePic（）就会被认为是一个局部函数，只能够被它的上层函数访问到。 写函数的时候最好不要函数嵌套函数。
js中的常用事件（重点）
事件概述
js的事件是js不可或缺的组成部分，要学习js的事件，必须要理解如下几个概念：
1）事件源：被监听的html元素2）事件：某类动作，例如点击事件，移入移除事件，敲击键盘事件等3）事件与事件源的绑定：在事件源上注册上某事件4）事件触发后的响应行为：事件触发后需要执行的代码，一般使用函数进行封装
常用事件
onload 当加载完成时触发（重要）onsubmit 当表单提交的时候触发，这个事件有返回值。onclick 当鼠标点击某个对象的时候触发ondbclick 当鼠标双击某个对象的时候触发onfocus 当获取焦点的时候触发onblur 当失去焦点的时候触发onchange 当用户改变域的内容时触发（获取焦点，改变内容，然后再失去焦点 ）onkeydown 当键盘按键被按下时触发onkeypress 当键盘按键被按住时触发onkeyup 键盘按键松开时触发onmousedown 当鼠标左键按下时触发onmouseup 当鼠标左键松开时触发onmouseover 当鼠标移到某个元素之上时触发onmouseout 当鼠标移开某个元素时触发onmousemove 当鼠标移动时触发
事件的两种绑定方式： 第一种：使用类似onclick这样的属性进行绑定。
<input
type=
"button" onclick=
"test()" />
第二种： 1先找到按钮2； 2给其绑定点击事件
给bt2的onclick中赋值的时候，只能够赋值为匿名函数，不然会认为是调用fn函数；
<input type="button" id="test" />
<script>
var dest = document.getElementById("test");
dest.onclick = function(){
}
BOM（对象集合）
BOM的概述（了解）
BOM（Browser Object Mode），浏览器对象模型，是将我们使用的浏览器抽象成对象模型，例如我们打开一个浏览器，会呈现出以下页面，通过js提供浏览器对象模型对象我们可以模拟浏览器功能。
BOM的对象
1.Screen对象，Screen 对象中存放着有关显示浏览器屏幕的信息。2.Window对象（BOM里面最顶级的对象），Window 对象表示一个浏览器窗口或一个框架。（重点）3.Navigator对象，包含的属性描述了正在使用的浏览器4.History对象，其实就是来保存浏览器历史记录信息。5.Location对象，Location 对象是 Window 对象的一个部分，可通过window.location 属性来访问。（重点）用来跳转页面使用 定时跳转到广告网页的案例，要用到location的href属性。 为了在页面加载完成之后执行，防止出现未加载时候的null （下例就是一个匿名函数例子）
window.onload =
function(){
}
匿名函数只能够写在<script>中，不能够写在行嵌套的script中。
Window对象
一、弹框（重点）
提示框 alert(提示信息) 只有一个确定按钮 alert(“haha”);
确认框 confirm(提示信息)，有确认和取消按钮，其中有一个boolean类型的返回值，记录用户点击的是确认还是取消；有一个返回值类型。 可以按照以下方式执行不同的确认和取消操作
输入框 prompt(提示信息)也有一个返回值，返回值就是我们输入的内容，如果点击取消，返回的就是null，不输入的话返回的是空字符串“”；
prompt（“请输入查询密码”）;
定时器（重点）
执行一次的定时器：setTimeout（“函数”，毫秒值） 就相当于一个延时器，这种的应用场景一般是做延时操作，过多久后执行某个函数； 其实前面就是省略的window.，对象window.是可以省略的
第一个参数：函数对象，用引号括起来表示第二个参数：毫秒值
执行循环的定时器：setInterval
清除定时器clearInterval(定时器对象)
轮播图的案例
多张图可以通过命名方式进行控制。使得命名方式具有一定的规律性，方便循环
多张图片也可以放在一个数组里面中。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>0605轮播图案例 自动切换
</title>
<script>
window.onload = function(){
arr = ["../img/js/1.jpg", "../img/js/2.jpg", "../img/js/3.jpg"];
index = 1;
window.setInterval(function(){
if( index >= arr.length){
index=0;
}
var image = document.getElementById("test");
image.src = arr[index];
index++;
},2000);
}
</script>
</head>
<body>
<div align="center">
<img src="../img/js/1.jpg" id="test" width="600px" height="400px" />
</div>
</body>
</html>
定时弹广告的案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定时弹出广告
</title>
<script>
window.onload = function(){
setTimeout(function(){
var ad = document.getElementById("topAd");
ad.style.display = "block";
},3000);
}
</script>
</head>
<body>
<div align="center">
<img src="../img/js/ad2.jpg" name="topAd" id="topAd" width="90%" style="display: none;" />
</div>
<div align="center">
<img src="../img/js/3.jpg" width="600px" height="400px"/>
</div>
</body>
</html>
跳转到广告页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定时跳转页面
</title>
<script>
window.onload = function(){
setTimeout(function(){
window.location.href = "Day0605_03定时弹广告案例.html";
}, 3000);
}
</script>
</head>
<body>
<div align="center">
<img src="../img/js/1.jpg" width="90%" />
</div>
</body>
</html>
表单校验的案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单校验
</title>
<script>
function checkInfo(){
var inputInfo = document.getElementsByTagName("input");
for( var i = 0; i < inputInfo.length; i++){
if(inputInfo[i].value == ""){
alert("请检查是否输入完了所有信息");
break;
}
}
var pass1 = document.getElementById("password1").value;
var pass2 = document.getElementById("password2").value;
if( pass1 != pass2 ){
alert("你是傻逼吗？");
}
}
</script>
</head>
<body>
<div>
<form name="userInfo" action="#" method="get" onsubmit="return checkInfo()" >
用户名
<input type="text" name="userName" id="userName" placeholder="请输入用户名" />
<br />
密 码
<input type="password" name="password1" id="password1" placeholder="请输入密码" />
<br />
确 认
<input type="password" name="password2" id="password2" placeholder="请再次输入密码" />
<br />
<input type="submit" name="submit" id="submit" value="点击提交" />
</form>
</div>
</body>
</html>
