JavaScript学习与实践一

一、JavaScript数组

　　创建JavaScript数组有两种方式

　　方式一：

var cars=new Array();

cars[0]="Audi";

cars[1]="BMW";

cars[2]="Volvo";

　　方式二：

var cars=new Array("Audi","BMW","Volvo");

二、JavaScript对象

　　1、创建方式

var person={firstname:"Bill", lastname:"Gates", id:5566};

　　2、寻址方式

name=person.lastname;

name=person["lastname"];

三、JavaScript函数

　　1、作用域

在函数之外声明的变量作用域是全局的，在程序的任意位置使用或者改变它们。在函数内部声明的变量也是全局的，除非在声明时使用了var关键字。var关键字使得变量的作用域称为局部的。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

    function greeting(str) {

        name = "xujian";

    }

    function greeting2() {

        greeting("123");

        alert(name);

    }

</script>

</head>

<body>

    <input type="button" onclick="greeting2()" value="欢迎" />

</body>

</html>

　　2、闭包

　　闭包就是能够读取其他函数内部变量的函数。

　　闭包有两个作用：一是可以读取到函数内部的变量，二是让这些变量的值始终保持在内存中。

四、文档对象模型DOM HTML

　　DOM HTML/CSS

　　1、document.write()可用于直接向html输出流写内容。(不要使用在文档加载之后使用 document.write()。这会覆盖该文档)

　　2、可以使用innerHTML属性来修改HTML内容

document.getElementById(id).innerHTML= ...

　　3、使用attribute属性改变HTML元素的属性

　　4、使用style.property改变HTML元素的样式

<p id="p2">Hello World!</p>

<script>

    document.getElementById("p2").style.color="blue";

</script>

　　DOM事件

onload/onunload事件：用户进入或离开页面时被触发
onchange事件：结合对输入字段的验证来使用

<!DOCTYPE html>

<html>

<head>

<script>

function myFunction()

{

　　var x=document.getElementById("fname");

　　x.value=x.value.toUpperCase();

}

</script>

</head>

<body>

   请输入英文字符：<input type="text" id="fname" onchange="myFunction()">

   <p>当您离开输入字段时，会触发将输入文本转换为大写的函数。</p>

</body>

</html>

onmouseover/onmouseout事件：用户的鼠标移至HTML元素上方或移出元素时触发函数
onmousedown/onmouseup/onclick事件：onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

　　DOM节点

　　创建新的HTML元素

<div id="div1">

    <p id="p1">这是一个段落</p>

    <p id="p2">这是另一个段落</p>

</div>

<script>

    var para=document.createElement("p");

    var node=document.createTextNode("这是新段落。");

    para.appendChild(node);

    var element=document.getElementById("div1");

    element.appendChild(para);

</script>

　　删除已有的HTML元素

<div id="div1">

    <p id="p1">这是一个段落。</p>

    <p id="p2">这是另一个段落。</p>

</div>

<script>

    var parent=document.getElementById("div1");

    var child=document.getElementById("p1");

    parent.removeChild(child);

</script>

五、浏览器对象模型BOM

　　1、window对象：表示浏览器窗口，所有JavaScript全局对象、函数以及变量都自动成为window对象的成员

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸

　　2、Screen对象：包含有关用户屏幕的信息

screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

　　3、Location对象：用于获得当前页面的地址(URL)，并把浏览器重定向到新的页面

location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口（80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）
location.assign 方法加载新的文档

　　4、History对象：包含浏览器的历史

history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同

　　5、Navigator对象：包含有关访问者浏览器的信息

<div id="example"></div>

<script>

txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";

txt+= "<p>Browser Name: " + navigator.appName + "</p>";

txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";

txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";

txt+= "<p>Platform: " + navigator.platform + "</p>";

txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";

txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";

document.getElementById("example").innerHTML=txt;

</script>

　　6、PopupAlert对象：消息框，包括警告框，确认框，提示框

警告框：用于确保用户可以得到某些信息，当警告框出现后，用户需要点击确定按钮才能继续操作

　　alert("文本");

确认框：用于使用户可以验证或者接受某些信息，当确认框出现后，用户确认点击确认或者取消才能继续操作。

　　confirm("文本")

提示框：用于提示用户在进入页面前输入某个值，当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

　　prompt("文本","默认值")