JavaScript学习资料整理

来源：互联网发布：报警电话知乎编辑：程序博客网时间：2024/05/21 06:54

内容来源：http://www.w3school.com.cn/

JavaScript 是属于网络的脚本语言！

JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。

JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 使用
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

外部的 JavaScript

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件：
<script src="myScript.js"></script>

JavaScript 通常用于操作 HTML 元素。JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。
在 JavaScript 中，用分号来结束语句是可选的。

JavaScript 对大小写敏感。
JavaScript 会忽略多余的空格，如以下是一样的：
var name="Hello";
var name = "Hello";

Windows 8 中的 JavaScript
提示：微软支持通过 JavaScript 创建 Windows 8 app。
对于因特网和视窗操作系统，JavaScript 都意味着未来。

提示：JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。

使用 var 关键词来声明变量
如果重新声明 JavaScript 变量，该变量的值不会丢失：
在以下两条语句执行后，变量 carname 的值依然是 "Volvo"：
var carname="Volvo";
var carname;

JavaScript 数组

下面的代码创建名为 cars 的数组：
var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";

JavaScript 对象
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：
var person={firstname:"Bill", lastname:"Gates", id:5566};
上面例子中的对象 (person) 有三个属性：firstname、lastname 以及 id。

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

调用带参数的函数：
<button onclick="myFunction('Bill Gates','CEO')">点击这里</button>

<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
}
</script>

向未声明的 JavaScript 变量来分配值
如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。

continue 语句（带有或不带标签引用）只能用在循环中。
break 语句（不带标签引用），只能用在循环或 switch 中。
通过标签引用，break 语句可用于跳出任何 JavaScript 代码块：

当有一个对象的多个属性或者方法需要操作时，就可以使用with，如：
<body>
test
<script type="text/javascript">
var o=document.createElement("div");
with(o){
style.cursor="pointer";
style.zIndex="100";
innerHTML="aaaa";
}
document.body.appendChild(o);
</script>
</body>
上面的代码相当于

<body>
test
<script type="text/javascript">
var o=document.createElement("div");
o.style.cursor="pointer";
o.style.zIndex="100";
o.innerHTML="aaaa";
document.body.appendChild(o);
</script>
</body>

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
?JavaScript 能够改变页面中的所有 HTML 元素
?JavaScript 能够改变页面中的所有 HTML 属性
?JavaScript 能够改变页面中的所有 CSS 样式
?JavaScript 能够对页面中的所有事件做出反应

查找 HTML 元素
?通过 id 找到 HTML 元素
?通过标签名找到 HTML 元素
?通过类名找到 HTML 元素

HTML的事件属性：
1. 向HTML元素分配事件，可以使用事件属性：
<button onclick="displayDate()">点击这里</button>
2. 使用 HTML DOM 来分配事件：
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。onload 和 onunload 事件可用于处理 cookie。

通过为body添加onmousedown和onmouseover事件，可以得到当前被点击及当前鼠标所指的对象，如下：
<html>
<head>
<script type="text/javascript">
function whichElement(e)
{
var targ if (!e) var e = window.event
if (e.target)
targ = e.target
else if (e.srcElement)
targ = e.srcElement
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode
var tname tname=targ.tagName
alert("You clicked on a " + tname + " element.")
}

function whichMouseOver(e)
{
var targ if (!e) var e = window.event
if (e.target)
targ = e.target
else if (e.srcElement)
targ = e.srcElement
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode
var tname tname=targ.tagName
document.getElementById("tip").innerHTML=tname
}
</script>
</head>
<body onmousedown="whichElement(event)" onmouseover="whichMouseOver(event)">
<p>在文档中点击某个位置。消息框会提示出您所点击的标签的名称。</p>
<h3>这是标题</h3>
<p>这是段落。</p>
<img src="/i/eg_mouse2.jpg" />
<p>当前鼠标所指元素：<p id="tip"></p></p>
</body>
</html>

Event 对象
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框,分别为：
alert("文本")
confirm("文本")
prompt("文本","默认值")

JavaScript 计时事件:
setTimeout() 未来的某时执行代码
clearTimeout() 取消setTimeout()

通过JavaScript可以创建和存储Cookie，数据存储在document.cookie 对象中，如：
function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}