w3school学习 - javascript入门
在浏览一下客户端代码时，经常会遇到javascript脚本，系统的学习一下对以后更深入了解客户端很有好处。
1. 应用场景
改进设计
验证表单
检测浏览器
创建cookies等
2. 入门实例
document.write("<h1>This is a heading</h1>");
x=document.getElementById("demo") //找到元素
x.style.color="#ff0000"; //改变样式
if isNaN(x) {alert("Not Numeric")};
3. 语法
<script> 和 </script> 之间的代码行包含了 JavaScript
一般情况下，函数与事件紧密相关。
我们需要在某个事件发生时执行代码，比如当用户点击按钮时。
如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。
通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。
外部 JavaScript 文件的文件扩展名是 .js。
<!DOCTYPE html> <html> <body> <script src="myScript.js"></script> </body> </html>
如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖
person=new Object(); person.firstname="Bill"; person.lastname="Gates"; person.age=56; person.eyecolor="blue";
function myFunction(10. 运算符，if-else, switch, for, while, break, continue语法，类似于c语言var1,var2) { 这里是要执行的代码 }
<script>
function myFunction()
{
try
{
var x=document.getElementById("demo").value;
if(x=="") throw "empty";
if(isNaN(x)) throw "not a number";
if(x>10) throw "too high";
if(x<5) throw "too low";
}
catch(err)
{
var y=document.getElementById("mess");
y.innerHTML="Error: " + err + ".";
}
}
</script>
4. JavaScript 表单验证
1. 用户是否已填写表单中的必填项目？
2. 用户输入的邮件地址是否合法？
3. 用户是否已输入合法的日期？
4. 用户是否在数据域 (numeric field) 中输入了文本？
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{alert(alerttxt);return false}
else {return true}
}
}
5. js是如何操作html DOM元素的？
var x=document.getElementById("intro");
3. 通过标签名找到 HTML 元素
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
3. 如需改变 HTML 元素的内容，语法：
document.getElementById(id).innerHTML=new HTML
6. js DOM事件
<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>
2. 当网页已加载时
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
<body onload="checkCookies()">
3. 当图像已加载时
4. 当鼠标移动到元素上时
5. 当输入字段被改变时
onchange 事件
<input type="text" id="fname" onchange="upperCase()">
6. 当提交 HTML 表单时
7. 当用户触发按键时
onmousedown、onmouseup 以及 onclick 事件
<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</div>
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
parent.removeChild(child);
7. js对象
JavaScript 提供多个内建对象，比如 String、Date、Array 等等。对象只是带有属性和方法的特殊数据类型。
属性：
MAX VALUE
MIN VALUE
NEGATIVE INFINITIVE
POSITIVE INFINITIVE
NaN
prototype
constructor
toExponential()
toFixed()
toPrecision()
toString()
valueOf()
getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。
setFullYear()
如何使用 setFullYear() 设置具体的日期。
toUTCString()
如何使用 toUTCString() 将当日的日期（根据 UTC）转换为字符串。
getDay()
var mycars=new Array("Saab","Volvo","BMW")
使用 for...in 声明来循环输出数组中的元素。
合并两个数组 - concat()
如何使用 concat() 方法来合并两个数组。
用数组的元素组成字符串 - join()
如何使用 join() 方法将数组的所有元素组成一个字符串。
文字数组 - sort()
如何使用 sort() 方法从字面上对数组进行排序。
数字数组 - sort()
如何使用 sort() 方法从数值上对数组进行排序。
5. Math对象
round() 四舍五入
max(), min()
random() 返回介于0-1的随机数
floor(), ceil()
常数：
Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E
6. js 正则表达式
test：
检索字符串中的指定值。返回值是 true 或 false。var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
exec：
返回值是被找到的值。如果没有发现匹配，则返回 null。var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));
compile:
用于改变正则表达式的值
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
patt1.compile("d");
document.write(patt1.test("The best things in life are free"));
8. js BOM模型 browser object model
1. window 高度，宽度，document对象，表示浏览器窗口属性
方法：
open(), close(), moveTo(), resizeTo()
2. screen
screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度
3. location
location.href 属性返回当前页面的 URL。
location.pathname 属性返回 URL 的路径名。
location.assign() 方法加载新的文档。
4. history
history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同
5. navigator
包含浏览器信息
如 appCodeName, appName, appVersion, cookieEnabled, platform, userAgent, systemLanguage等
6. 消息框
alert() 警告框
confirm() 确认、取消框
prompt() 提示框
7. 计时功能， 毫秒为单位
setTimeout()
未来的某时执行代码
clearTimeout()
取消setTimeout()
8. cookie
document.cookie
创建、存储、获取、检查cookie
实例 http://www.w3school.com.cn/tiy/t.asp?f=jseg_cookie_username
9. jQuery库
jQuery是js著名的一个库
引用 jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作
10. AJAX
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
AJAX 是一种用于创建快速动态网页的技术。
XMLHttpRequest 是 AJAX 的基础。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
variable=new XMLHttpRequest();
XMLHttpRequest 对象用于和服务器交换数据。
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法
1. GET请求
xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();
2. POST请求
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
xmlhttp.open("GET","ajax_test.asp",true);
3. 响应
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
responseText 属性返回字符串形式的响应：
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性
4. XHR事件
onreadystatechange 的描述
http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_onreadystatechange.asp
| 属性 | 描述 |
|---|---|
| onreadystatechange | 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 |
| readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
|
| status | 200: "OK" 404: 未找到页面 |
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}