w3school学习 - javascript入门

在浏览一下客户端代码时，经常会遇到javascript脚本，系统的学习一下对以后更深入了解客户端很有好处。

1. 应用场景

改进设计

验证表单

检测浏览器

创建cookies等

2. 入门实例

这里的document是 js中的的html DOM对象

http://www.w3school.com.cn/jsref/dom_obj_document.asp

1. 改变html内容

document.write("<h1>This is a heading</h1>");

2. 改变html样式

x=document.getElementById("demo")  //找到元素
x.style.color="#ff0000";           //改变样式

3. 验证输入

if isNaN(x) {alert("Not Numeric")};

3. 语法

1. 标签

2. 函数与事件

一般情况下，函数与事件紧密相关。

我们需要在某个事件发生时执行代码，比如当用户点击按钮时。

如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。

3. js文件的独立与引入

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

外部 JavaScript 文件的文件扩展名是 .js。

<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

4. js输出

document.write() 向文档输出写内容。
如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖

5. 变量 var声明，常用的时数字与字符串

动态类型，同一变量，即可以是数字，也可以是字符串

6. js对象： json

7. js数组

8. 创建js对象

person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";

9. 函数

function myFunction(var1,var2)
{
这里是要执行的代码
}

10. 运算符，if-else, switch, for, while, break, continue语法，类似于c语言

11. try... throw... catch...语法实例

<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 表单验证

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

被 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}
}
}

http://www.w3school.com.cn/js/js_form_validation.asp

5. js是如何操作html DOM元素的？

html的DOM结构

1. 通过 id 找到 HTML 元素

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事件

1. 当用户点击鼠标时

<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>

button也是一样的

2. 当网页已加载时

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

<body οnlοad="checkCookies()">

3. 当图像已加载时

4. 当鼠标移动到元素上时

onmouseover 和 onmouseout 事件

<div οnmοuseοver="mOver(this)" οnmοuseοut="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>

5. 当输入字段被改变时
onchange 事件

<input type="text" id="fname" οnchange="upperCase()">

6. 当提交 HTML 表单时

onclick 事件

7. 当用户触发按键时

onmousedown、onmouseup 以及 onclick 事件

<div οnmοusedοwn="mDown(this)" οnmοuseup="mUp(this)" style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</div>

9. DOM节点操作

增删改查

增

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 等等。
对象只是带有属性和方法的特殊数据类型。

js内建对象的一些特性：

1. js数字

数字属性和方法
属性：
MAX VALUE
MIN VALUE
NEGATIVE INFINITIVE
POSITIVE INFINITIVE
NaN
prototype

constructor

方法：
toExponential()
toFixed()
toPrecision()
toString()
valueOf()

2. js字符串

属性

长度 txt.length

样式 small(), big(), bold(), italics() blink(), fixed(),

fontcolor("ddd"), fontsize(16)

toUpperCase(), toLowerCase()

sub(), sup()

link("http://lll....")

查找子串位置：

str.indexOf("Hello")

匹配特定字符：

str.match("world")

字符串替换：

str.replace(/Microsoft/,"W3School")

3. js 日期

Date()

返回格式：

Thu Feb 26 2015 17:55:22 GMT+0800 (CST)

getTime()
getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。

setFullYear()
如何使用 setFullYear() 设置具体的日期。

toUTCString()
如何使用 toUTCString() 将当日的日期（根据 UTC）转换为字符串。

getDay()

返回星期几，数字 0-7，从星期日开始

4. js数组

var mycars=new Array("Saab","Volvo","BMW")

For...In 声明
使用 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>

基础语法是：$(selector).action()
美元符号定义 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");

XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：
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 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面

属性

描述

onreadystatechange

存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
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;}}