javascript 完整知识点整理(基于w3school教程)

时间：2022-11-17 15:08:27

Copyright 2016 by 蔡舒啸 保持署名-非商业性使用-相同方式共享 Creative Commons BY-NC-ND 3.0

目录

一　5种基本类型

JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。

undefined

//不赋值就是undefined类型
var testUndefined1;
//undefined类型唯一的值是undefined
var testUndefined = undefined;
//null类型唯一的值是null
var testNull = null;
//undefined “继承”自 null
alert(testUndefined==testNull);//true

//boolean
var testBoobean = true;  
/*
数据类型 转化成true的值 转化成false的值
Boolean ture false
String 所有的非空字符串 ""（空字符串）
Number 任何非零数字（包括无穷大） 0和NaN 
Object 任何对象 不存在
Undefined 不存在 undefined
*/

//string
var testString = "Hello";  

//number
//所有 JavaScript 数字均为 64 位
// 整数（不使用小数点或指数计数法）最多为 15 位。
// 小数的最大位数是 17，但是浮点运算并不总是 100% 准确 var x=0.2+0.1;//！=0.3
010==8
0x10==16
1.0
.1//not recommended
2.3e7
/* 算数
round(double... x) //支持小数和负数的四舍五入
random(double... x) //0 到 1 之间的随机数。
max(double... x)。
min(double... x)
*/

//var testNull = null; 
var testObject = {a:1};  
/*
person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
*/

//function
//只要函数运行完毕，本地变量就会被删除。
//函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。
//在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
var testFunction = function(){return;};
/*
例外：
如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。
这条语句：
carname="Volvo";
将声明一个全局变量 carname，即使它在函数内执行。
*/


//array
var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";

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

var cars=["Audi","BMW","Volvo"];

//javascript支持混合类型的数组
var cars=[1,"s"];
for(i=0;i<cars.length;i++) {
    alert(typeof cars[i]);
}
//number string

　typeof 关键字

typeof 变量名返回字符串
仅对undefined有效
alert(testUndefined == undefined)

通用：
alert(typeof testUndefined == “undefined”)

　三种强制类型转换

Boolean(value)
Number(value)
String(value)

　日期

显示十分秒

<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
// add a zero in front of numbers<10
m=checkTime(m)
s=checkTime(s)
document.getElementById('txt').innerHTML=h+":"+m+":"+s
/*setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。*/
t=setTimeout('startTime()',500)//递归调用 HTML DOM setTimeout() 方法刷新时间
}

function checkTime(i)
{
if (i<10)
 {i="0" + i}
return i
}
</script>
</head>

<body onload="startTime()">
<div id="txt"></div>
</body>
</html>

二　if语句，for语句,while,do-while,switch-case

if, for, while, switch 都离不了比较运算符和逻辑运算符, js中的比较运算符和逻辑运算符和 Java 中的很像

　比较运算符

==
!=
=== 全等（值和类型）

x=5;
x===5 //为 true；
x==="5" //为 false

　逻辑运算符

&&
||
!
variablename=(condition)?value1:value2

　if, for语句, while, do-while, switch-case

//if
if (age<18) document.write("Too young");

if() {
//
}else if() {
//
}
else {
//
}

//for
cars=["BMW","Volvo","Saab","Ford"];
for (var i=0;i<cars.length;i++)
{
document.write(cars[i] + "<br>");
}

//while
while (i<5)
  {
  x=x + "The number is " + i + "<br>";
  i++;
  }

//do-while
do
  {
  x=x + "The number is " + i + "<br>";
  i++;
  }
while (i<5);

//switch
var day=new Date().getDay();
switch (day)
{
case 6:
  x="Today it's Saturday";
break;
case 0:
  x="Today it's Sunday";
break;
default:
  x="Looking forward to the Weekend";
}

三　JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码

四　Javascript 内置字符串方法

"foo".length    //字符串的长度
/*
anchor() 创建 HTML 锚。
big() 用大号字体显示字符串。
blink() 显示闪动字符串。
bold() 使用粗体显示字符串。
charAt() 返回在指定位置的字符。
charCodeAt() 返回在指定的位置的字符的 Unicode 编码。
concat() 连接字符串。
fixed() 以打字机文本显示字符串。
fontcolor() 使用指定的颜色来显示字符串。
fontsize() 使用指定的尺寸来显示字符串。
fromCharCode() 从字符编码创建一个字符串。
indexOf() 检索字符串。
italics() 使用斜体显示字符串。
lastIndexOf() 从后向前搜索字符串。
link() 将字符串显示为链接。
localeCompare() 用本地特定的顺序来比较两个字符串。
match() 找到一个或多个正则表达式的匹配。
replace() 替换与正则表达式匹配的子串。
search() 检索与正则表达式相匹配的值。
slice() 提取字符串的片断，并在新的字符串中返回被提取的部分。
small() 使用小字号来显示字符串。
split() 把字符串分割为字符串数组。
strike() 使用删除线来显示字符串。
sub() 把字符串显示为下标。
substr() 从起始索引号提取字符串中指定数目的字符。
substring() 提取字符串中两个指定的索引号之间的字符。
sup() 把字符串显示为上标。
toLocaleLowerCase() 把字符串转换为小写。
toLocaleUpperCase() 把字符串转换为大写。
toLowerCase() 把字符串转换为小写。
toUpperCase() 把字符串转换为大写。
toSource() 代表对象的源代码。
toString() 返回字符串。
valueOf() 返回某个字符串对象的原始值。
*/

其中，支持正则表达式的 String 对象的方法
search() 检索与正则表达式相匹配的值
match() 找到一个或多个正则表达式的匹配
replace() 替换与正则表达式匹配的子串
split() 把字符串分割为字符串数组

　正则表达式

new RegExp(pattern, attributes);参数pattern
用来存储检索模式，可以是字符串或正则表达式。正则表达式的语法请看 http://www.w3school.com.cn/jsref/jsref_obj_regexp.asp
参数attributes
如果 pattern 是正则表达式，而不是字符串，则必须省略该参数。attributes可以是 “g”、”i” 和 “m”，分别用于指定全局匹配、区分大小写的匹配和多行匹配。

以下代码定义了名为 patt1 的 RegExp 对象，其检索模式模式是 - 字符串 “e”：

var patt1=new RegExp("e");

RegExp 对象有 3 个方法：test()、exec() 以及 compile()。

test() 方法检索字符串中的指定值。返回值是 true 或 false。类似java Regex类的find()方法

exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。类似java Regex类的group() 方法

var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
//增加模式d
patt1.compile("d");

document.write(patt1.test("The best things in life are free"));

五　JavaScript 错误 - Throw、Try 和 Catch

<!DOCTYPE html>
<html>
<head>
<script>
var txt="";
function message()
{
try
 {
 adddlert("Welcome guest!");
 }
catch(err)
 {
 txt="There was an error on this page.\n\n";
 txt+="Error description: " + err.message + "\n\n";
 txt+="Click OK to continue.\n\n";
 alert(txt);
 }
}
</script>
</head>

<body>
<input type="button" value="View message" onclick="message()">
</body>

</html>

　throw

throw exception

异常可以是 JavaScript 字符串、数字、逻辑值或对象。

六　Javascript验证

E-mail　验证

<html>
<head>
<script type="text/javascript">
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
 {alert(alerttxt);return false}
else {return true}
}
}

function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
 {email.focus();return false}
}
}
</script>
</head>

<body>
<form action="submitpage.htm"onsubmit="return validate_form(this);" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>

</html>

七　HTML DOM操作

本例查找 id=”main” 的元素，然后查找 “main” 中的所有<p> 元素：

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

本例改变了 javascript 完整知识点整理(基于w3school教程) 元素的 src 属性：

<!DOCTYPE html>
<html>
<body>

<img id="image" src="smiley.gif">

<script>
document.getElementById("image").src="landscape.jpg";
</script>

</body>
</html>

　操作css

最权威的DOMcss样式文档http://www.w3school.com.cn/jsref/dom_obj_style.asp

下面的例子会改变

元素的样式：

<!DOCTYPE html>
<html>
<body>

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

<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>

<p>上面的段落已被一段脚本修改。</p>

</body>
</html>

　通过css的visibility属性隐藏 DOM 节点

<!DOCTYPE html>
<html>
<body>

<p id="p1">这是一段文本。</p>

<input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" />
<input type="button" value="显示文本" onclick="document.getElementById('p1').style.visibility='visible'" />

</body>
</html>

八　事件

　使用 js 来分配事件触发那个函数

HTML DOM 允许您通过使用 JavaScript 来向 HTML 元素分配事件：
实例
向 button 元素分配 onclick 事件：

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

　onload 和 onunload 事件

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

<!DOCTYPE html>
<html>
<body onload="checkCookies()">

<script>
function checkCookies()
{
if (navigator.cookieEnabled==true)
 {
 alert("已启用 cookie")
 }
else
 {
 alert("未启用 cookie")
 }
}
</script>

<p>提示框会告诉你，浏览器是否已启用 cookie。</p>
</body>
</html>

　onchange（输入框内容改变，失去焦点时自动触发）onfocus

<!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>
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(x)
{
x.style.background="yellow";
}
</script>
</head>
<body>

请输入英文字符：<input type="text" onfocus="myFunction(this)">

<p>当输入字段获得焦点时，会触发改变背景颜色的函数。</p>

</body>
</html>

　onmouseover onmouseout（鼠标事件）

<!DOCTYPE html>
<html>
<body>

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

<script>
function mOver(obj)
{
obj.innerHTML="谢谢"
}

function mOut(obj)
{
obj.innerHTML="把鼠标移到上面"
}
</script>

</body>
</html>

　onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

<!DOCTYPE html>
<html>
<body>

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

<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="请释放鼠标按钮"
}

function mUp(obj)
{
obj.style.backgroundColor="green";
obj.innerHTML="请按下鼠标按钮"
}
</script>

</body>
</html>

九　操作DOM节点（HTML标签）

　创建

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

　删除

删除已有的 HTML 元素
如需删除 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>

DOM 需要清楚您需要删除的元素，以及它的父元素。
这是常用的解决方案：找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素：

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

十　对象

JavaScript 是面向对象的语言，但 JavaScript 不使用类。
在 JavaScript 中，不会创建类，也不会通过类来创建对象（就像在其他面向对象的语言中那样）。
JavaScript 基于 prototype，而不是基于类的。

<!DOCTYPE html>
<html>
<body>

//构造函数
<script>
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
function changeName(name)
{
this.lastname=name;
}
}

myFather=new person("Bill","Gates",56,"blue");

document.write(myFather.firstname + " is " + myFather.age + " years old.");
</script>

</body>
</html>

　遍历属性（Java反射！）

<script>
function myFunction()
{
var x;
var txt="";
var person={fname:"Bill",lname:"Gates",age:56};

for (x in person)
{
txt=txt + person[x];
}

document.getElementById("demo").innerHTML=txt;
}
</script>

十一　Browser Object Model

window
screen
location
history
navigator
popupAlert
Timing
Cookies

十二　JS库

请参考jQuery, AngularJS, React教程

现在主流从 jQuery 慢慢转向 AngularJS 和 React

十三　AJAX

asynchronous javascript and xml

2005 年谷歌提出,应用在搜索时提供搜索建议

事件驱动函数loadXMLDoc()

XMLHttpRequest 对象()

xmlhttp=new XMLHttpRequest();

通过 xmlhttp.responseText 属性获得服务器返回字符串
eval将字符串转成对象数组 json = eval(json);

通过 xmlhttp.responseXML 获得 XML 形式的响应数据。

　open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。

method：请求的类型；GET 或 POST. 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

url：文件在服务器上的位置. 通常是php或asp. 路径是相对于网站根目录的.
async：true（异步）或 false（同步）

　async=true

必须是true异步
通过 AJAX，JavaScript 无需等待服务器的响应，而是：
在等待服务器响应时执行其他脚本
当响应就绪后对响应进行处理

当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：

xmlhttp.onreadystatechange=function()
 {
if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

　async=false

Async = false
如需使用 async=false，请将 open() 方法中的第三个参数改为 false：
xmlhttp.open(“GET”,”test1.txt”,false);
我们不推荐使用 async=false，但是对于一些小型的请求，也是可以的。
请记住，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。
注释：当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可：
xmlhttp.open(“GET”,”test1.txt”,false);
xmlhttp.send();
document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText;

　send(string)

将请求发送到服务器。

string：仅用于 POST 请求

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

　使用 Callback 函数

该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：

<html>
<head>
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
 }
 xmlhttp.onreadystatechange=cfunc;
 xmlhttp.open("GET",url,true);
 xmlhttp.send();
}

function myFunction()
{
 loadXMLDoc(
"/ajax/test1.txt",
function()
 {
if (xmlhttp.readyState==4 && xmlhttp.status==200)
 {
 document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
 }
 }
 );
}
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="myFunction()">通过 AJAX 改变内容</button>

</body>
</html>

AJAX 小例子 - 搜索提示

技术细节:
1. 输入框的onkeyup事件
2. 发送get请求 “/ajax/gethint.asp?q=” + str
3. `

建议：

“ 
<html>
<head>
<script type="text/javascript">
function showHint(str)
{
var xmlhttp;
if (str.length==0)
 {
 document.getElementById("txtHint").innerHTML="";
return;
 }
if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
 }
else
 {// code for IE6, IE5
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
xmlhttp.onreadystatechange=function()
 {
if (xmlhttp.readyState==4 && xmlhttp.status==200)
 {
 document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
 }
 }
xmlhttp.open("GET","/ajax/gethint.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<h3>请在下面的输入框中键入字母（A - Z）：</h3>
<form action="">
姓氏：<input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>建议：<span id="txtHint"></span></p>

</body>
</html>

　服务器端 php文件

<?php
// 用名字来填充数组
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";

//获得来自 URL 的 q 参数
$q=$_GET["q"];

//如果 q 大于 0，则查找数组中的所有提示
if (strlen($q) > 0)
 {
$hint="";
for($i=0; $i<count($a); $i++)
 {
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
 {
if ($hint=="")
 {
$hint=$a[$i];
 }
else
 {
$hint=$hint." , ".$a[$i];
 }
 }
 }
 }

// 如果未找到提示，则把输出设置为 "no suggestion"
// 否则设置为正确的值
if ($hint == "")
 {
$response="no suggestion";
 }
else
 {
$response=$hint;
 }

//输出响应
echo $response;
?>

　AJAX 数据库

<html>
<head>
<script type="text/javascript">
function showCustomer(str)
{
var xmlhttp; 
if (str=="")
 {
 document.getElementById("txtHint").innerHTML="";
return;
 }
if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
 }
xmlhttp.onreadystatechange=function()
 {
if (xmlhttp.readyState==4 && xmlhttp.status==200)
 {
 document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
 }
 }
xmlhttp.open("GET","/ajax/getcustomer.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<form action="" style="margin-top:15px;">
<label>请选择一位客户：
<select name="customers" onchange="showCustomer(this.value)" style="font-family:Verdana, Arial, Helvetica, sans-serif;">
<option value="APPLE">Apple Computer, Inc.</option>
<option value="BAIDU ">BAIDU, Inc</option>
<option value="Canon">Canon USA, Inc.</option>
<option value="Google">Google, Inc.</option>
<option value="Nokia">Nokia Corporation</option>
<option value="SONY">Sony Corporation of America</option>
</select>
</label>
</form>
<br />
<div id="txtHint">客户信息将在此处列出 ...</div>

</body>
</html>

　服务器端 php文件

<%
response.expires=-1
sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="
sql=sql & "'" & request.querystring("q") & "'"

set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("/db/northwind.mdb"))
set rs=Server.CreateObject("ADODB.recordset")
rs.Open sql,conn

response.write("<table>")
do until rs.EOF
for each x in rs.Fields
    response.write("<tr><td><b>" & x.name & "</b></td>")
    response.write("<td>" & x.value & "</td></tr>")
  next
  rs.MoveNext
loop
response.write("</table>")
%>
标签：

相关文章