【笔记-JAVE_WEB】 javascript

变量为函数体内临时变量和函数外全局变量

函数可以在任意位置调用，如果是全局区调用则载入js时就执行

代码片段可以在全局位置任意写，载入js时就执行

1. 使用方法
   1. 写入HTML

<script>

document.write("<h1>xxxxxx</h1>");

</script>

包含函数的脚本位于文档的head部分，这样可以确保调用函数前，脚本已经载入。

包含执行内容的脚本一般放在body末尾，有利于载入，防止阻塞造成的页面载入慢。

在xhtml上，<和&被解释为xml，为了避免干扰，在xhtml中使用

<script type="text/javascript">

1. 1. JS文件载入

将脚本保存为.js，可以被多个文件调用

JS文件中：

document.write("<h1>xxxxxx</h1>");

function fun(){alert("xx");}

Html文件中：

<script language = "javascript" type ="text/jscript" src = "a.js">

</script>

<button onclick = "fun();">btn</button>

1. 1. 写入浏览器

在浏览器的地址栏直接写入代码

javascript:alert("hello");

1. 1. JS文件交互

通过<script>标签引入的两个js之间不能互相调用

需要调用b.js中的函数和变量时，在js文件中载入b.js

html中在body节点下载入，所以载入当前js时也在body节点下

newElement = document.createElement("script");

newElement.setAttribute("src","b.js");

newElement.setAttribute("type","text/javascript");

document.body.appendChild(newElement);

1. 调试

console.log("xxx");

1. 变量定义

a = 1.3；

var i=10;

var j="abc";

===========类型转换

var string = String(100);

1. 基本数据类型
   1. Number

-5,  -5.5 , 0xd都是数字类型（不分int，float这种）

测试变量是非数字：

isNaN("4")会得到返回值false，因为4是数字

isNaN("four")返回ture，因为four不是数字

数学函数：

Math.PI   得到圆周率

Math.pow(x,y); 返回x的y次幂

常量：

Infinity

Number.MAX_VALUE

Number.MIN_VALUE

Number.NEGATIVE_INFINITY  负无穷大

Number.POSITIVE_INFINITY  正无穷大

1. 1. 字符和字符串

‘a’   ‘abc’  “abc”  

1. 1. Boolean

Boolean b=true;

1. 1. null

代表没有值，不等价于空

1. 1. undefined

是一种状态

1. 函数

function  fun(*，*){........}

参数无类型，只需要标识

返回值如果有需要直接写

一个函数返回值时，如果函数没有返回，则接收为undefined

function  fun(a,b)

{

     alert(a);

}

fun(12);  // 调用时可以直接缺省参数

1. 1. 带参函数

function  ab(txt){........}

调用时：onclick=”ab(‘hello’)”

外部有双引号时，内部用单引号

1. 1. 默认参数

定义函数时可以不定义参数，函数中使用arguments数组直接拿参数

a = arguments[0];

b = arguments[1];

1. 1. 返回值

function ab(){   return “hello”;}

调用时：document.write(ab());

1. 1. 匿名函数

也就是函数直接量

var i = function (x, y) { return x + y }

alert(i(1, 1));

1. 1. 闭包

嵌套函数可以访问外部函数的变量

function f() {

    var num = 10;

    function show() {

        alert(num);

    }

    return show();

}

f();//调用

1. 事件

===============标签中调用

  <script language = "javascript" type ="text/jscript">

         function check()

         {

             if (f1.user.value == "")

             {

                  alert("请输入");

                  f1.user.focus();

             }

             else

             {

                f1.submit();

             }

         }

</script>

 Name或id属性都可以用.语法访问到

<form name="f1" action="b.html" method="post" target="_blank">

 用户名:<input type="text" name="user" />

 <input type="button"   onclick = "check()" value="按钮名"/>

 </form>

=========放在元素下

Js代码加载必须在相应标签加载完后执行

 document.getElementById('bt').onclick = function() { alert(1); };

或者

document.getElementById('bt').addEventListener('click', function() { alert(1); }, false);

1. 对象
   1. 使用函数构造

function People(name)
{
    this.name = name;
    this.show = function(age){alert(this.name + age);};
}

var people = new People("nn");
people.show(10);

1. 1. 声明后添加

var people = new Object();
people.name = "xx";
people.show = function(age){alert(this.name + age);};

people.show(12);

1. 1. json构造

var people = {name:"aa",show: function(age){alert(this.name + age)}};
people.show(10);

并列数据之间使用逗号（,）

映射用冒号（:）

并列数据集合（数组）用方括号（[]）

映射的集合（对象）用大括号({})

1. 数组
   1. 构造

1）var N = ["abc",2];

2）var N = new Array();

N[0] = "abc";

N[1] = 2;

1. var N = new Array("abc",2);
   1. 数组操作

arr.pop();     在尾部删除元素，返回被删除元素

arr.push(7);   在尾部添加元素，返回新数组长度

arr.shift();     在头部删除元素

arr.unshift(7);  在头部添加元素

var str =  arr.join();   将数组内容变成字符串

var arr3 = arr.concat(arr2);  连接两个数组

1. 1. 遍历

for in对于数组对象属性进行循环

for(index in N){

    alert(N[index]);

}

var  CC = {a:1,b:2};

for(var x in CC)

{

var key  = x;

var val = CC[x];

}

1. String

Hello \

Abc       使用\可以对字符串进行折行处理

“abc”，”A” 都是字符串类型

"***'str'***",   '***"str"***' 字符串用单引号或者双引号包含，单引号内可以包含双引号，双引号内可以包含单引号。

转译字符：\”

"***".length可以获取字符串长度

substring(0, 3)  返回下标0到3的字符串。第二个参数可省略

substr(1,2)   返回下标1开始，长度2的字符串。第二个参数可省略

indexOf("bc")  返回bc所在的位置下标

将字符串根据-分割

var arr = str.split("-");

for(i = 0 ; i < arr.length; ++i)

{

      alert(arr[i]);

}

匹配str中xcc，全部替换成##。 /g表示全部替换，如果不加则替换匹配的第一个 

 var reg = /xc{2}m/g;

 var ss = str.replace(reg,"##");

正则表达式

var str = "http://www.abc.org";

var Regex = /http:\/\/w+\.(.*)/g;  //正则表达式     /g表示匹配全部

var result = Regex.exec(str); //result为一个字符串数组，第一个元素是源字符串，后面的元素为正则表达式中每个（）内的内容

String的match,search,replace可以使用正则表达式

1. Date

date = new Date();  获取当前时间

new Date(2010,1,1);  构造，小时，分钟，秒，毫秒缺省

date.getSeconds() 获取秒数

date.getFullYear()获取年，getYear()获取的是19**年差

显示时间

 <p id = "clock"></p>

function show()

{

    var now = new Date();

    clock.innerHTML = now.getHours() + ":"  + now.getMinutes() + ":" + now.getSeconds();

}

window.setInterval("show()",1000);

1. window

window对象是一个全局对象，表示浏览器目前正打开的窗口，是其他对象的顶层对象，所以可以省略名称，直接调用

alert	弹出提示框 alert(....);
confirm	弹出确认框,确认返回true confirm(...);
prompt	弹出提示对话框，并要求输入一个字符串 defster是要求输入位置的默认值 prompt("xx","defstr");
open	var windowVar = open("b.html","target","width=500,height=200");   执行成功返回新窗口对象。第一个参数为url地址，空字符串则打开空窗口。第二个参数制定新窗口名称，该名称可作为<a>和<form>的target属性。第三个参数可选。
close	关闭浏览器窗口 close();
setInterval 　　　clearInterval	定时器，1s调用1次fun setInterval("fun",1000);   清除定时器，id从1开始，是每个定时器设置的先后次序 clearInterval(1);
setTimeout 　　　clearTimeout	1s后执行fun函数 setTimeout("fun()",1000); 取消代码延迟 clearTimeout(1);
print	调用浏览器打印机 print();
moveTo 　　　moveBy	移动浏览器到指定位置  moveTo(1,1); 移动偏移量 moveBy(-10,100);
scrollTo	移动右侧和下方滚动条
resizeTo	设置窗口宽高 resizeTo(500, 500);

1. DOM

文档对象模型（DOM）document对象提供了一种访问和修改HTML文档内容的方法。

DOM是树形，对于html，树根是<html>标记，<head>和<body>是枝干

1. 1. document方法

write	document.write("<h1>xxxxxx</h1>");    直接写html文件，如果是在开始载入，则会写在文件头。如果是中间调用则会清空文件
getElementById 直接用id也可以代表一个标记对	通过id获取一个标记对 innerHTML 表示标记对在页面显示的内容 通过标记对中id属性获取，如<p id="id1"></p> var x = document.getElementById("id1"); x.innerHTML = "xfasdfsdf";  //修改标签内的内容//也可以使用id1.innerHTML alert(x.tagName);
getElementsByTagName	通过标记对名获取一组标记对 获取所有p标签，遍历获得每个的内容 var content = document.getElementsByTagName("p");  for(i = 0 ; i < content.length; ++i)  {          alert(content[i].innerHTML);       }
createElement	创建标记对 根据标签名td创建td标记对元素 td_con = document.createElement("td");

1. 1. 节点方法

setAttribute	设置标记对属性值 **.setAttribute("bgcolor","red");
removeAttribute	删除属性 **.removeAttribute("bgcolor");
appendChild	将con加入到**节点下 **.appendChild(con);
insertBefore	在子节点refChil前面插入新节点newElement **.insertBefore(newElement,refChil);
replaceChild	将子节点odl替换成newElement **.replaceChild(newElement,old)
removeChild	删除子节点ch **.removeChild(ch);
cloneNode	复制**节点，包括属性。参数为true会通过递归方法克隆子节点  newNode=  **.cloneNode(true);
hasChildNodes	判断一个元素是否有子节点（标记对中没有任何内容，包括空白） 文本节点和属性节点不可能再包含子节点，返回false nodeType 1   元素节点类型 2   属性节点类型 3   文本节点类型

1. 1. 遍历所有节点

var elemList = "";

function getElement(node)

{

    var total = 0;

    if (node.nodeType == 1)  //检查是否是elment对象

    {

        total++;

        elemList =  elemList + node.nodeName + "  ";

    }

    

    var chil = node.childNodes;

    for(var m = node.firstChild; m != null; m = m.nextSibling)

    {

         total += getElement(m);

    }

    return total;

}

var num = getElement(document);

alert("包含" + num + "个标记" + " " + elemList);

1. 1. HTML集合

document.anchors  包含所有a元素的组(具有name属性的参数)

document.forms    包含所有form元素的组

document.images   包含所有图像元素的组

document.links    包含所有具有href属性的a元素的值

1. 操作符
   1. in

用来鉴定一个给定的属性是否包含在一个对象内，in搜索的是属性是否存在。

var obj =

{

    a: "aaa",

    b: "bbb"

};

if ("a" in obj) {

    alert("xx");

}

1. 1. instanceof

用来测试一个给定的表达式（通常是一个变量）是否是类的一个对象。

var date = new Date();

if (date instanceof Date) {

    alert("xx");

}

1. 1. delete

将对象的一个值删除或者变为未定义

delete N[0];  //删除数组中第一个元素

1. 1. typeof

返回操作数的变量类型

var i = 10;

if (typeof (i) == "number") {

    alert("xx");

}

1. 1. void

常用来提交一个表单或打开一个新的窗口

void(window.open());

1. 错误处理

try{...执行代码...

   throw(“ab”);

}

catch(err){..处理错误.

    if(err==”ab”){......}.

}

Throw抛出的异常参数，由err变量接收

1. 功能
   1. 执行代码

将字符串解释为js代码执行

 eval("var i = 10; alert(i);")

1. 1. 获取屏幕属性

screen.height

screen.availHeight

1. 1. 页面跳转

self.location="index.jsp";

window.location="index.jsp";

top.location="index.jsp";

history.forward();

history.back();

location.reload(); 参数ture从服务器加载页面，false从缓存中加载