JavaWeb知识总结-JavaScript语言

JavaScript语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码。

JS是弱类型语言。

特点：

1.交互性（它可以做的就是信息的动态交互）

2.安全性（不允许直接访问本地磁盘）

3.跨平台性（只要是可以解析JS的浏览器都可以执行，和平台无关）

JavaScript和html的结合方式

第一种方式

只需要在head标签中，或者在body标签中，使用script标签来书写JavaScript代码

<script type="text/javascript">

alert("hello javaScript!");

</script>

第二种方式

使用script标签引入单独的JavaScript代码文件

<script type="text/javascript" src="1.js"></script>

script标签可以用来定义js代码，也可以用来引入js文件。但是两个功能二选一使用。不能同时使用两个功能。

JavaScript的变量类型：

        数值类型：number

        字符串类型：string

        对象类型： object

        布尔类型：boolean

        函数类型：function

JavaScript里特殊的值：

        undefined：未定义，所有js变量未赋予初始值的时候，默认值都是undefined。

        null：空值

        NaN：Not a Number。非数字，非数值

JS中的定义变量格式：

        var 变量名；

        var 变量名 = 值；

关系运算符：

        全等于：===，除了做字面值的比较之外，还会比较两个变量的数据类型。

逻辑运算：

        且：&&        或：||        取反运算：!

        在JavaScript语言中，所有的变量，都可以作为一个boolean类型的变量去使用。

        0、null、undefined、"" 都认为是false；

JS中数组的定义：

        var 数组名 = [];        // 空数组

        var 数组名 = [1,'abc',true];        // 定义数组的同时赋值元素

函数：

函数的定义方式：

第一种，可以使用function关键字来定义函数。

        function 函数名(形参列表){

                函数体

        }

        <script type="text/javascript">

                function sum(num1,num2){

                        var result = num1 + num2;

                        return result;

                }

                alert(sum(100,50));

        </script>

函数的第二种定义方式：

        var 函数名 = function(形参列表){ 函数体 }

        <script type="text/javascript">

                var fun3 = function(num1, num2){

                        return num1 + num2;

                }

                alert(fun3(100,200));

        </script>

JS中的自定义对象

Object形式的自定义对象

        对象的定义：

                var 变量名 = new Object(); // 对象实例（空对象）

                变量名.属性名 = 值;

                变量名.函数名 = function(){} 

        对象的访问：

                变量名.属性 / 函数名();

        <script type="text/javascript">

                var obj = new Object();

                obj.name = "test";

                obj.age = 18;

                obj.fun = function() {

                        alert("姓名：" + this.name + "，年龄：" + this.age);

                }

                // 对象的访问

                obj.fun();

        </script>

js中的事件

事件：是电脑输入设备与页面进行交互的响应。

常用的事件：

        onload 加载完成事件：页面加载完成之后，常用于做页面js代码初始化的操作

        onclick 单击事件：常用于按钮的点击响应操作

        onblur 失去焦点事件：常用于输入框失去焦点后验证其输入内容是否合法

        onchange 内容发生改变事件：常用于下拉列表和输入框内容发生改变后的操作

        onsubmit 表单提交事件：常用于表单提交前，验证所有表单项是否合法    

事件的注册又分为静态注册和动态注册两种：

事件的注册：告诉浏览器，当事件响应之后要执行哪些操作代码。

静态注册事件：通过html标签的事件属性赋于事件响应后的代码。

动态注册事件：先通过js代码得到标签的dom对象，然后再通过dom对象.事件名 = function(){}这种形式赋于事件响应后的代码。

动态注册的基本步骤：

        1、获取标签对象

        2、标签对象.事件名 = function(){}

动态注册onclick事件

window.onload = function(){

        var btnObj = document.getElementById("btn01");    

        btnObj.onclick = function(){

                alert("动态注册的onclick事件")；

        }

}

 document(DOM)是JavaScript语言提供的一个对象

DOM模型

DOM全称是Document Object Model 文档对象模型

简单理解：就是把文档中的标签，属性，文本转换成为对象来管理。

Document对象的理解：

        第一点：document它管理了所有HTML文档内容。

        第二点：document它是一种树结构的文档，有层级关系。

        第三点：它让我们把所有的标签都对象化。

        第四点：我们可以通过document访问所有的标签对象。

Document对象中的方法介绍

document.getElementById(elementId)

通过标签的id属性查找标签dom对象，elementId是标签的id属性值

document.getElemenstByName(elementName)

通过标签的name属性查找标签dom对象，elementName是标签的name属性值

document.getElemenstByTagName(tagname)

通过标签名查找标签dom对象，tagname是标签名

document.createElement(tagName)

通过给定的标签名创建一个标签对象，tagName是要创建的标签名

注： document对象的三个查询方法，如果有id属性，则优先使用getElementById方法来进行查询，如果没有id属性，则优先使用getElementsByName方法来进行查询。如果id属性和name属性都没有，最后再按标签名查getElementsByTagName。

以上的三个方法，一定要在页面加载完成之后再执行，才能查询到标签对象。