js

js

定义

前端开发三大件之一，运行在浏览器端的脚本语言，负责网页与用户的交互效果

三种使用方式

行内式（标签内部使用）
	<input type="button" name="" onclick="alert('ok！');">
内嵌式（ＨＴＭＬ页面使用）
	<script type="text/javascript">        
    	alert('ok！');
	</script>
外链式（独立的js文件，需要在ＨＴＭＬ中引入）
	<script type="text/javascript" src="js/index.js"></script>

变量和数据结构

js是一个弱类型语言，不需要指定变量的类型，只需要在使用的时候加上关键字＇var＇，同时以＇；＇结尾即可

var iNum = 123;

六种数据类型：
	number
	string
	boolean
	undefined
	null
	object

变量命名规范
	区分大小写
	第一个字符必须是字母，下划线，或者$
	其他字符可以是字母，下划线，$或者数字

命名风格
	对象o　oDiv
	数组a aItems
	字符串s sName
	整数i iItem
	布尔b bIsComplete
	浮点数f fPrice
	函数fn fnHandler

函数

函数定义

函数要保证可以重复使用，使用关键字function定义
	<script type="text/javascript">
        // 函数定义
        function fnAlert(){
            alert('hello!');
        }
    </script>

函数调用

函数名加小括号
    <script type="text/javascript">
        // 函数定义
        function fnAlert(){
            alert('hello!');
        }
        // 函数调用
        fnAlert();
    </script>

定义用参数有返回值的函数

函数如果有参数，参数放到小括号里，有返回值，通过return返回返回值
<script type="text/javascript">
    function fnAdd(iNum01,iNum02){
        var iRs = iNum01 + iNum02;
        return iRs;
        alert('here!');
    }

    var iCount = fnAdd(3,4);
    alert(iCount);  //弹出7
</script>

变量作用域

无非两种，全局和局部

条件语句

if
if...else
if...else if...else

比较运算符

＝＝
＝＝＝
！＝
＞
＜
＞＝
＜＝

逻辑运算符

＆＆  and
||   or
!    not

获取标签元素

使用内置对象document上的getElementByld方法来获取标签的元素，获取到的是一个html对象
    <div id="div1">这是一个div元素</div>
    <script type="text/javascript">
        var oDiv = document.getElementById('div1');
        alert(oDiv);
    </script>

    <script type="text/javascript">
        window.onload = function(){
            var oDiv = document.getElementById('div1');
        }
    </script>

操作标签元素属性

想对标签的元素属性进行操作，首先需要获取到标签的元素，才能完成对标签元素属性的读取和设置

js里边的属性写法跟html的属性大致雷同，但是＇class＇需要换成＇className＇
然后＇style＇中的属性，将带横杠的换成驼峰式，比如：'fone-size'，换成＇style.foneSize＇

innerHTML可以读取或者设置标签包裹的内容

标签属性的获取和设置
	（获取对象）１．var　标签对象名 = document.getElementByld('id名称')
	（读取属性）２．var 变量名 = 标签对象名.属性名
	（设置属性）３．标签对象名.属性名 = 新的属性值

数组及操作方法

var aList = new Array(1, 2, 3)
var aList2 = [1, 2, 3]

循环语句

for
while
do-while

var array = [1, 4, 5];

for(var index = 0; index < array.length; index++){
    var result = array[index];
    alert(result);
}

定时器

js有两种创建定时器的方法：
	# 调用函数一次
	setTimeout(func[, delay, param1, param2, ...])
	＃　重复调用函数
	setInterval(func[, delay, param1, param2, ...])

<script> 
    function hello(){ 
        alert('hello'); 
    } 

    // 执行一次函数的定时器
    setTimeout(hello, 500);
</script>

清楚定时器同样也有两种：
	clearTimeout(timeoutID)
	clearInterval(timeoutID)

js事件

可以分为三种：
	页面完成加载
	input字段改变时
	按钮被点击

按钮被触发时的几种方式：
	＃　获取别的标签的元素
	<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
	<p id="demo"></p>
	
	＃　获取自身元素的内容
	<button onclick="this.innerHTML=Date()">现在的时间是?</button>
	
	＃ 通过函数
	<button onclick="displayDate()">点这里</button>
    <script>
    function displayDate(){
        document.getElementById("demo").innerHTML=Date();
    }
    </script>
    <p id="demo"></p>

常见的事件:
	onchange
	onclick
	onmouseover
	onmouseout
	onkeydown
	onload

获取页面表单元素

# 获取当前页面的所有表单
document.forms

# 获取当前页面的name="exportServlet"的表单
document.forms[‘exportServlet’]