JavaScript入门

概述：

　　JavaScirpt是一种脚本语言，是一种直译试脚本语言，是一种基于对象的脚本语言，是一种动态类型，弱类型，基于原型的语言，主要用于网页编程

一、什么是JavaScript：

　　JavaScript是一种属于网络的脚本语言，已经被广泛的用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。通常JavaScript脚本是嵌入在HTML中来实现自身的功能的。

二、JavaScript的优势

　　1、动态写入HTML输出

　　　　使用这个方法可以动态的在页面中添加新的元素

　　　　实例：动态在网页输出当前日期时间

　　JavaScript代码：

document.write("<p><b>时间:<b><font color='red'>" + new Date().toLocaleString() + "</font></p>");

　　2、对事件作出反应

　　　　使用事件让页面与用户有更好的交互性，根据用户的操作做出不同的响应。

　　　　实例：单击网页中的按钮时，弹出提示对话框

　　HMTL代码：

<button type="button"onclick="alert('你好')">点击这里</button>

　　3、改变HTML内容

　　　　使用JavaScript来处理HTML内容是非常强大的功能。

　　　　实例：根据页面中的HTML元素的id名，获取页面元素并改变该元素的内容

　　HTML代码：

    <div id="demo">你还没有权限查看内容</div>
    <input id="btn" type="button" value="先睹为快" />

　　JavaScript代码：

document.getElementById("btn").onclick = function () {
    var ss = document.getElementById("demo");//查找元素
    ss.innerHTML = "正在建设中ing.....";//改变内容
}

　　4、改变HTML图像（标签属性）

　　　　用户可以根据需要选择不同的图像，常用于图片动态切换中

　　HTML代码：

    <img id="image" src="img1.png" />
    <input id="btn1" type="button" value="下一张"/>

　　JavaScript代码：

document.getElementById("btn1").onclick = function () {
    var ele = document.getElementById("image");//查找元素
    ele.src = "img1.png";//改变引用的图片文件
    this.disabled = true;//禁用按钮
}

　　5、改变HTML样式

　　　　常用于改变HTML元素的样式，曾强用户体验

　　实例：当鼠标移动到当前行时，高亮度显示

　　HTML代码：

    <ul>
        <li class="list">测试1</li>
        <li class="list">测试2</li>
        <li class="list">测试3</li>
        <li class="list">测试4</li>
    </ul>

　　JavaScript代码：

    var rows = document.getElementsByClassName("list");
    for (i = 0; i < rows.length; i++) {
        rows[i].onmouseover = function () { this.style.backgroundColor = 'gray'; }
        rows[i].onmouseout = function () { this.style.backgroundColor = 'white'; }
    }

　　6、验证输入

　　　　JavaScript常用于验证用户的输入

　　示例：当用户输入手机号并离开次对话框判断是否是有效的电话号码

　　HTML代码：

<input id="phoneNumber" onblur="" type="text" />

　　JavaScript代码：

doucument.getElementById("phoneNumber").onblur = function () {
    var num = this.value;
    if(isNaN(num)||num.length!=11){alert("不是手机号码");}
}

 总之：JavaScript是客户端脚本语言，让页面羽用户更加有交互性，涉及动态效果，增加用户体验。

　　

三、JavaScript实现基础

　　JavaScript脚本如何来实现自己想要实现的效果？首先必须了解JavaScript的基础语法

　　　　JavaScript脚本是基于对象的操作。可以分为是三部分　　

　　　　　　ECMAScript核心：为不同的宿主环境提供核心的脚本能力。

　　　　ECMAScript规定了能适应于各种宿主环境的脚本核心语法规则，关于ECMAScript语言，ECMA-262描述如下：

　　　　　　ECMAScript可以为不同种类的宿主环境提供核心的脚本编程能力，因此核心的脚本语言是与任何特定的宿主换件分开进行规定的

　　　　　　ECMAScript仅仅是个人描述，定义了脚本语言所有的对象、属性和方法，其主要描述了以下内容

　　　　　　£：语法

　　　　　　£：数据类型

　　　　　　£：关键字

　　　　　　£：保留字

　　　　　　£：运算符

　　　　　　£：对象

　　　　　　£：语句

　　　　　　ECMAScript标准定义了JavaScript脚本中最为核心的内容，是JavaScript脚本的骨架，有了骨架，就可以在其上进行扩展，典型的扩展如DOM（文档对象模型）和BOM（浏览器对象模型）等。

　　　　DOM（文档对象模型）：规定了访问HTML和XML的应用程序接口。

　　　　DOM定义了JavaScript可以进行操作的文档的各个功能部件的接口，提供访问文档各个功能部件（如：document、form、textarea等）的途径以及操作方法。

　　　　示例：　　　　

 <a  id="demo" href="#">显示当前日期时间</a>
    <span id="date"></span>
    <script>
        document.getElementById("demo").onclick = function () {
            //在id为"date"的页面元素中显示当前日期时间文本
            document.getElementById("date").innerText = new date.toLocaleString();
            //阻止默认浏览器动作(W3C)
            if (e && e.preventDefault) {
                e.preventDefault();
            } else {
                //IE中阻止函数器默认动作的方式
                window.event.returnValue = false;
            }
            return false;
        }
    </script>

 

　　　　BOM（浏览器对象模型）：提供了独立于内容而在浏览器窗口之间进行交互的对象和方法。

　　　　BOM定义了JavaScript可以进行操作的浏览器的个个功能部件的接口，提供访问文档的各个功能部件（如窗口本身、屏幕功能部件、浏览历史记录等）的途径以及操作方法。

　　　　通常情况下浏览器特定的JavaScript扩展都被看做BOM的一部分，主要包括：

　　　　£：关闭、移动浏览器及调整浏览器窗口的大小；

　　      £：弹出新的浏览器窗口；

　　　　£：提供浏览器的详细信息的定位对象；

　　　　£：提供载入到浏览器窗口的文档详细信息的定位对象；

　　　　£：提供用户屏幕分辨率详细信息的屏幕对象；

　　　　£：提供cookie的支持；

    　　  £：加入ActiveXObject类扩展BOM，通过JavaScript实例化ActionX对象；

BOM有一些事实上的标准，如窗口对象、导航对象等，但每种浏览器都为这些对象定义或扩展属性及方法。

　　实例：

 

<a href="JavaScript:window.close();">关闭窗口</a>