js 知识点整理-01

一　5种基本类型
　typeof 关键字
　三种强制类型转换
　日期
二　if语句for语句whiledo-whileswitch-case
　比较运算符
　逻辑运算符
　if for语句 while do-while switch-case
三　JavaScript 是脚本语言浏览器会在读取代码时逐行地执行脚本代码
四　Javascript 内置字符串方法
　正则表达式
五　JavaScript 错误 - ThrowTry 和 Catch
　throw
六　Javascript验证
E-mail　验证
七　HTML DOM操作
　操作css
　通过css的visibility属性隐藏 DOM 节点
八　事件
　使用 js 来分配事件触发那个函数
　onload 和 onunload 事件
　onchange输入框内容改变失去焦点时自动触发onfocus
　onmouseover onmouseout鼠标事件
　onmousedownonmouseup 以及 onclick 事件
九　操作DOM节点HTML标签
　创建
　删除
十　对象
　遍历属性Java反射
十一　Browser Object Model
十二　JS库
十三　AJAX
　openmethodurlasync
　asynctrue
　asyncfalse
　sendstring
　使用 Callback 函数
AJAX 小例子 - 搜索提示
　服务器端 php文件
　AJAX 数据库
　服务器端 php文件
一　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
0108
0x1016
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)

日期
显示十分秒

function checkTime(i)
{
if (i<10)
{i=“0” + i}
return i
}

二　if语句，for语句,while,do-while,switch-case if, for, while, switch 都离不了比较运算符和逻辑运算符, js中的比较运算符和逻辑运算符和 Java 中的很像

比较运算符

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

x=5;
x=5 //为 true；
x=“5” //为 false
1
2
3
　逻辑运算符
&&
||
!
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] + “
”);
}

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

//do-while
do
{
x=x + "The number is " + i + “
”;
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”);
1
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

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

六　Javascript验证
E-mail　验证

function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,“Not a valid e-mail address!”)==false)
{email.focus();return false}
}
}

 七　HTML DOM操作 本例查找 id=”main” 的元素，然后查找 “main” 中的所有

元素：

var x=document.getElementById(“main”);
var y=x.getElementsByTagName(“p”);
1
2
本例改变了 元素的 src 属性：

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

下面的例子会改变

元素的样式：

Hello World!

Hello World!

上面的段落已被一段脚本修改。

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

这是一段文本。

八　事件 　使用 js 来分配事件触发那个函数 HTML DOM 允许您通过使用 JavaScript 来向 HTML 元素分配事件： 实例 向 button 元素分配 onclick 事件：

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

提示框会告诉你，浏览器是否已启用 cookie。

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

请输入英文字符：

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

请输入英文字符：

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

　onmouseover onmouseout（鼠标事件）

把鼠标移到上面

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

请点击这里

九　操作DOM节点（HTML标签） 　创建

这是一个段落。

这是另一个段落。

　删除 删除已有的 HTML 元素 如需删除 HTML 元素，您必须首先获得该元素的父元素：

这是一个段落。

这是另一个段落。

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

var child=document.getElementById(“p1”);
child.parentNode.removeChild(child);
十　对象
JavaScript 是面向对象的语言，但 JavaScript 不使用类。
在 JavaScript 中，不会创建类，也不会通过类来创建对象（就像在其他面向对象的语言中那样）。
JavaScript 基于 prototype，而不是基于类的。

//构造函数

　遍历属性（Java反射！）

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

document.getElementById(“demo”).innerHTML=txt;
}

十一　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.readyState4 && xmlhttp.status200)
{
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 事件时执行的任务（每次调用可能不尽相同）：

function myFunction()
{
loadXMLDoc(
“/ajax/test1.txt”,
function()
{
if (xmlhttp.readyState4 && xmlhttp.status200)
{
document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText;
}
}
);
}

Let AJAX change this text

通过 AJAX 改变内容 AJAX 小例子 - 搜索提示 技术细节: 1. 输入框的onkeyup事件 2. 发送get请求 “/ajax/gethint.asp?q=” + str 3. `

建议：

“

请在下面的输入框中键入字母（A - Z）：

姓氏：

建议：

　服务器端 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); KaTeX parse error: Expected '}', got 'EOF' at end of input: …if (strtolower(q)strtolower(substr($a[$i],0,strlen(KaTeX parse error: Expected '}', got 'EOF' at end of input: … { if (hint"")
{
$hint=$a[$i];
}
else
{
$hint=$hint." , ".$a[$i];
}
}
}
}

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

//输出响应
echo $response;
?>
　AJAX 数据库

请选择一位客户： Apple Computer, Inc. BAIDU, Inc Canon USA, Inc. Google, Inc. Nokia Corporation Sony Corporation of America

客户信息将在此处列出 ...

　服务器端 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("

")
do until rs.EOF
for each x in rs.Fields
response.write("”)
response.write("”)
next
rs.MoveNext
loop
response.write("

" & x.name & “

" & x.value & “

")
%>