JavaScript 一

• JavaScript是一种脚本语言， 1、在客户端运行  2、（解释性语言）由浏览器解析运行的（IE、搜狐等）
• 主要作用：和用户交互，实现一些动态的效果
• JavaScript在处理整个html的时候，会把它当做对象来处理，document（当前网页）代表它将当前网页当成了一个对象

JavaScript特点：

js代码在处理一个html元素（即html标记）时需要以对象形式来操作html元素

document.getElementById()方法有两个作用：

1、根据提供的某个html元素id找到html标记  

2、将它包装成一个对象返回赋给一个变量

一个完整的JavaScript实现是由以下3个不同部分组成的（如下图所示）：

•  核心（ECMAScript）；

if else 判断等等

• 文档对象模型（DOM）；

document，对整个html网页进行操作

• 浏览器对象模型（BOM）。

对浏览器信息进行操作

在网页中加入JavaScript

1. 可以在html文件的任何位置加入<script></script>块，可以写多个，从上到下顺序执行
2. 引入js文件。引入格式：<script  src="…"></script>，注意：src属性指明.js文件的位置
3. 作为属性值使用。通过超链接执行js代码

<a href="javascript:alert('aaa');">XXX</a>

<a href="javascript:view();del();">XXX</a>

• 函数只加载不执行，只有函数被调用时才会执行
• JavaScript大小写敏感

JavaScript基本语法—数据类型

 JavaScript的数据类型分为基本数据类型和复合数据类型，复合数据类型主要有对象、数组和函数。

 JavaScript为弱类型

1、基本数据类型有数值型、字符型、逻辑型，以及两个特殊的数据类型

• 数值型

数值包含整数和浮点数。    

• 特殊数值型

包括：Infinity和NAN。Infinity表示值超出了可表示的最大值的范围，而NAN是“not a number”的缩写形式，表示表达式的结果不是数值型数据。

• 字符型(字符串)

在js里没有字符的概念，全是字符串，故使用单引号或双引号都可以，单引号内可以出现双引号，双引号内也可以出现单引号，但若双引号内想出现双引号则需要使用转义符。例如： "this \"is\" a 'dog' ..."

常用的转义字符如下：

转义符号	说明
\b	表示退格符
\f	表示换页
\n	表示换行符
\r	表示回车符
\t	表示Tab符号
\'	表示单引号
\"	表示双引号
\\	表示\

无论你在文本框输入的内容是什么类型的（数值等），通过js得到的值都是字符串类型的

• Boolean布尔型（true  or  false）

2、特殊数据类型

• 无定义数据类型（undefined）

undefined表示一个变量尚未赋值

• 空值（null）

null表示该变量被赋予了一个空值

对象

var o = {name:"王",function:study{

......

}};

数组

var arr = new Array(3);

arr[3] = 12;

alert(arr[3]);

显示为12，此时数组长度变为4

JS中数组可以越界使用，但尽量不要这么用

JS中不到万不得已，尽量不要进行类型转换（因JavaScript为弱类型）

提升基本数据为对象

每一个基本数据类型都存在一个相应的对象，这些对象提供了一些很有用的方法来处理基本数据。            

例如，String对象提供了一个toLowerCase()方法来把一个字符串转换为小写格式。

JavaScript基本语法

1、变量

JavaScript的变量应该先定义，再使用。

• 定义：var i=0;
• 声明：var i;
• 可以使用一个var同时声明多个变量；可以在声明变量的同时对其进行赋值；如果只是声明了变量，并未对其赋值，其值默认为：undefined

//这样也是允许的

var o = 2;
var o = "12";

//此时就相当于对变量o的重新赋值

2、数组

数组定义  

• var arr = new Array(3);  
• 通过arr.length取得数组的长度  
• Javascript数组可以越界访问元素    

创建一个数组有以下3种方式：

• new Array();
• new Array(len);
• new Array([item0,[item1,[…]]]);

3、运算符

• <、<=、>、>=、!=、==这些在比较的时候会自动进行类型转换，把等号右侧的自动转换为等号左侧的数据类型进行比较

缺陷：不同浏览器可能效果不同，有可能不做类型转换，建议同类型进行比较

• 绝对等于（===） 、 绝对不等于（!==），不进行类型转换
• 在if语句里只能出现==或===，=只是赋值符号
• 逗号运算符：用var定义多个变量，各个变量用逗号分隔
• typeof运算符返回一个字符串，指明其操作数的数据类型

typeof()用来判断它括号内变量的类型的  

示例：
var  str = “abc”;
alert(typeof(str));//string

typeof 返回值有六种可能：  

• number  
• string  
• boolean  
• object  
• function  
• undefined

在JavaScript中substring方法的用法与Java语言中不太一样

var str = "abcdefg";

alert(str.substring(0,2));//从第1个位置截取(2-0)个字符，即从第1个位置截取2个字符

alert(str.substring(3,5));//从第4个位置截取(5-3)个字符，即从第4个位置截取2个字符

alert(str.substring(3));//从第4个位置一直截取到最后。

• +运算符用在不同的地方还不一样，如果两端是数值，就做加法运算；如果是字符串，就将字符串连接在一起
• 在script块中函数之外定义的是全局变量，在函数中定义的变量全是局部变量

JavaScript事件

可将在浏览器中发生的事件分为以下几种类型：

• 鼠标事件：用户使用鼠标进行特定操作时触发  
• 键盘事件：用户在键盘上敲击、输入时触发  
• HTML事件：窗口发生变动或者发生特定的客户端－服务器端交互时触发。

一、鼠标事件

• onclick：点击鼠标左键时触发（如果鼠标右键也按下则不会触发）。当用户的焦点在按钮上，并按了回车键，同样会触发该事件
• ondblclick：双击鼠标左键响应（如果鼠标右键也按下则不会触发）  
• onmousedown：按下任意一个鼠标按钮时触发  
• onmouseup：松开任意一个鼠标按钮时触发
• onmouseout：鼠标指针在某个元素上，且用户正要将鼠标移出元素的边界时触发  
• onmouseover：鼠标移出某个元素到另一个元素上时触发  
• onmousemove：鼠标在某个元素上移动时持续触发

说明： 移动鼠标从一个对象进入另一个对象时，先发生的事件是onmouseout（发生在鼠标移出的那个对象）。接着，在这两个对象上都触发onmousemove事件。最后，在鼠标进入的那个对象上触发onmouseover事件。

鼠标触发的事件会自动创建一个鼠标事件对象（event）

• 如何使用鼠标事件对象？

<input type="button" value="单击事件" onclick="demo(event);"/>

//一单击这个按钮，这个onclick事件就激活了，它激活后会干两件事：

//第一件事，创建一个鼠标事件对象，该对象的名称为event；第二件事，要执行onclick事件中写的代码

鼠标事件对象event的属性：

• 坐标属性（如：clientX和clientY等）  

单击鼠标的时候，那一瞬间鼠标的XY坐标是什么

• type属性：事件名称  

这个鼠标事件对象是由哪个事件产生的，那个事件的名称（即产生鼠标事件对象的那个事件名称）

事件名称不带on，on是介词，onclick事件的事件名称为click

• shiftKey：true表示按下Shift键;否则为false  

产生鼠标事件对象时有没有按Shift键

• ctrlKey：true表示按下Ctrl键;否则为false  

产生鼠标事件对象时有没有按Ctrl键

• altKey：true表示按下Alt键;否则为false

产生鼠标事件对象时有没有按Alt键

<script>
	function clickDemo(event22){
          var x = event22.clientX;
	  var y = event22.clientY;
	  var type = event22.type;
	  var shiftKey = event22.shiftKey;
	  var ctrlKey = event22.ctrlKey;
	  var altKey = event22.altKey;
	  alert("x: " + x);
	  alert("y: " + y);
	  alert("type: " + type);
	  alert("shiftKey: " + shiftKey);
	  alert("ctrlKey: " + ctrlKey);
	  alert("altKey: " + altKey);
	}
</script>

调用代码：

<input type="button" value="Button1" onclick="clickDemo(event);"/>

注：onclick=“clickDemo(event);”中的event必须这么写，表示将产生的event对象传递给clickDemo()函数，如果写成其它名称，则会报错，而clickDemo(event)函数中的变量名（即event）可以写成任意名称，但是不要使用JavaScript关键字

鼠标事件的执行顺序

• onmousedown
• onmouseup
• onclick
• ondblclick

二、键盘事件

• onkeydown：用户在键盘上按下某按键时触发。一直按着某键，它则会不断触发（Opera浏览器除外）。（即：所有按键均触发该事件）  
• onkeypress：用户按下键盘上的一个按键，并产生一个字符时触发（Shift、Alt之类的按键除外，因为这类按钮按下时不会产生字符，所以当按这些按键时不会触发该事件），一直按下按键时，它则会持续触发。注：按下“回车”键，也会触发该事件。
• onkeyup：用户释放按着的按键时触发。      

尽管所有的元素都支持键盘事件，但在文本框中输入文字时，是最容易触发这些事件的。（即：所有按键均触发该事件）  

键盘事件对象event的属性：

• keyCode属性：对于onkeypress事件，表示按下按键的Unicode码;对于onkeydown/onkeyup事件，表示按下按键的数字代码（如字母，不管按下的是大写还是小写，均返回大写字母的ASCII码），一般使用onkeypress事件。  

最重要的属性，是一个码，是一个阿拉伯数字，整数，他返回的是按下按键的ASCII码(或Unicode码)

• charCode属性：按下按键的Unicode值。(有时返回undefined值)  （不用）

经过反复试验charCode属性的值始终是undefined，不好使

• type属性：事件名称  
• shiftKey：true表示按下Shift键;否则为false  
• ctrlKey：true表示按下Ctrl键;否则为false  
• altKey：true表示按下Alt键;否则为false

回车的ASCII码为13

<html>
<head>
<title></title>
<script>
function login(kv){
    var fobj = document.getElementById("f1");
    if(kv.keyCode == 13){
        fobj.submit();
    }
}
</script>
</head>
<body>
<form id="f1" action="www.baidu.com">
    用户名：<input type="text" id="uname"/><br>
    密码：<input type="password" id="password" onkeypress="login(event);"/><br>
</form>
</body>

</html>

键盘事件的执行顺序

• onkeydown
• onkeypress
• onkeyup

三、HTML事件

主要应用于一些特殊的html元素

• onblur：任何元素或窗口本身失去焦点时触发。
• onfocus：任何元素或者窗口本身获取焦点时（用户点击它、Tab键切换到它或者任何其他与它交互的手段）触发。
• onload：页面完全载入后，在window对象上触发;所有的框架载入后，在框架集上触发;<img/>完全载入后，在其上触发;或者<object/>元素，当其完全载入后在其上触发。

onload 主要指body元素，载入事件，整个页面的最后一行代码都载入到浏览器以后这个事件才执行

• onunload：页面完全卸载后，在window对象上触发;所有的框架卸载后，在框架集上触发;<img/>完全卸载后，在其上触发;或者<object/>元素，当其完全卸载后在其上触发。

卸载：当这个页面被别的页面覆盖掉的时候就叫被卸载

当一个页面被卸载（被覆盖掉）的时候，body上边的onunload起作用，事件被激活

• onchange：文本框（<input/>或<textarea/>）失去焦点时并且在它获取焦点后内容发生过改变时触发;<select/>元素的值发生改变时触发。

主要用于下拉列表框

<html>
<head>
<title></title>
<script>
    function change(value){
        alert(value);
    }
    function add(){
        var obj = document.getElementById("edu");
        var op = new Option("博士后",4);//构造方法，第一个参数是option中间显示的文本值，第二个参数是option的value值
        obj.options[obj.options.length] = op;
    }
</script>
</head>
<body>
学历：<select id="edu" onchange="change(this.value);">//这里传的值是option的value值,不会传option中间的文本值
        <option value="1">本科</option>
        <option value="2">硕士</option>
        <option value="3">博士</option>
     </select>
    <input type="button" value="添加下拉列表框" onclick="add();"/>
</body>

</html>

• onselect：用户选择了文本框中的一个或多个字符时触发（<input>或<textarea/>）。
• onerror：JavaScript脚本出错时，在window对象上触发;某个<img/>的指定的图像无法载入时，在其上触发;或<object/>元素无法载入时触发;或者框架集中的一个或多个框架无法载入时触发。
• onsubmit：点击提交按钮（<input type=“submit”>）时，在<form/>上触发，当onsubmit事件指定响应一个函数时，在该函数内部不要再进行表单的提交，否则会产生重复提交的问题。

onsubmit提交事件，只能用在form表单上

验证表单有两种方式：

但只能使用其中一种，不能两种一起用，不然就变成二次提交了

• 第一种：如果登录按钮是submit按钮，想进行表单验证必须与form表单的onsubmit事件配合使用

onsubmit事件调用函数时必须加上return，否则拦不住submit按钮提交表单，且函数返回值应为true或false，return false表示不提交表单，return true表示onsubmit事件提交表单

<head>
<title></title>
<script>
function login(){
    var uname = document.getElementById("uname").value;
    var password = document.getElementById("password").value;
    var errors = "";
    if(uname == null || uname == ""){
       errors = "[提示信息]用户名不能为空\n";
    }
    if(password == null || password == ""){
       errors += "[提示信息]密码不能为空";
    }
    if(errors != ""){
       alert(errors);
        return false;
    }else{
        return true;//onsubmit事件帮忙提交表单
    }
}
</script>
</head>
<body>
<form id="f1" action="www.baidu.com" onsubmit="return login();">//必须写return，否则就算return false也拦不住
    用户名：<input type="text" id="uname"/><br>
    密码：<input type="password" id="password"/><br>
    <input type="submit" value="登录"/>
</form>
</body>
</html>

• 第二种：使用button按钮提交表单，需要配合onclick事件提交表单

<head>
<title></title>
<script>
function login(){
    var uname = document.getElementById("uname").value;
    var password = document.getElementById("password").value;
    var fobj = document.getElementById("f1");
    var errors = "";
    if(uname == null || uname == ""){
       errors = "[提示信息]用户名不能为空\n";
    }
    if(password == null || password == ""){
       errors += "[提示信息]密码不能为空";
    }
    if(errors != ""){
       alert(errors);
    }else{
        fobj.submit();//表单自己提交
    }
}
</script>
</head>
<body>
<form id="f1" action="www.baidu.com">
    用户名：<input type="text" id="uname"/><br>
    密码：<input type="password" id="password"/><br>
    <input type="button" value="登录" onclick="login();"/>
</form>
</body>
</html>

注：submit按钮和button按钮在一个表单中只能使用一个来进行表单的提交，上面是演示用的例子，用于实现表单提交的两种方式。在实际开发中，在一个表单中，要么使用button按钮配合onclick事件提交表单，或者使用submit按钮配合onsubmit事件提交表单，二者只能选择其中一个。