Day03-JavaScript01

JS的简介

什么是js

javascript简称js，是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，“寄生”在html体内随网络传输到客户端的浏览器的内存中解析。（html的加载也是从上往下加载的）
- 脚本语言
- 脚本：电影或电视剧的拍摄时候的剧本底稿。/计算机中的脚本，给计算机看。脚本中包含一些给计算机的指令。
- Java和C语言，都需要编译成二进制的可执行文件。脚本文件是不需要编译，直接可以使用解释器进行解释执行！
- 百度的解释：脚本语言又被称为扩建的语言，或者动态语言，是一种编程语言，用来控制软件应用程序，脚本通常以文本（如ASCII)保存，只在被调用时进行解释或编译。
js是 基于对象 和 事件驱动 的脚本语言。
- 基于对象：不支持继承！并且其中内置了许许多多的对象
- 事件驱动：无事件，不js，没有事件就无法执行js代码。点击事件，前进后退、滑动、提交等等事件。

js的作用（常见）

1. js可以动态的修改html及css的代码（修改的是浏览器内存中的那一份代码，服务器端的文件是没有变化的）
1. 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" >//这里面不能够有js代码</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 uName = document.getElementById("userName").value;
//                      if(uName == ""){//                            alert("请输入用户名");
//                            return false;
//                      }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 />密 &nbsp;&nbsp;码  <input type="password" name="password1" id="password1" placeholder="请输入密码" /><br />确 &nbsp;&nbsp;认  <input type="password" name="password2" id="password2" placeholder="请再次输入密码" /><br /><input type="submit" name="submit" id="submit" value="点击提交"  /></form></div></body>
</html>