动态页面
目录
3.eclipse对javascript、html的支持... 2
正文
一、怎么使用javascript代码
1.直接插入的方式
现代浏览器都嵌入了javascript引擎，在想要的地方嵌入<script>…</script>的代码即可，它也是使用//进行注释的
2.使用脚本文件
javascript可以单独写在.js的文件中，然后在需要的地方用<script type=”text/javascript” src=”脚本全名.js”></script>进行引入
3.eclipse对javascript、html的支持
下载Eclipse Java EE IDE for Web Developers
(1)使用空项目
建立一个空项目、空项目下再建立html文件；
点击项目->右键->Configure->Convert to JavaScript Project…
(2)使用javaee工程
这种做法的好处是html可以发布到局域网内，而不是使用浏览器打开本地文件的样式
新建项目Dynamic Web Project；
选择Target runtime运行环境（默认是eclipse的J2EE Preview）、如果有别的需要再做其他设置；
在WebContent下写html文件，Run As->Run on Server
二、常量与变量
变量用var进行声明，函数体内的变量默认是私有的，可能用到的常量：
|
Math.E |
常量e |
|
Math.LN10 |
10的自然对数 |
|
Math.LN2 |
2的自然对数 |
|
Math.LOG10E |
以10为底e的对数 |
|
Math.LOG2E |
以2为底e的对数 |
|
Math.PI |
常量PI |
|
Math.SQRT1_2 |
1除以2的平方根 |
|
Math.SQRT2 |
2的平方根 |
|
Number.MAX_VALUE |
可表示的最大数 |
|
Number.MIN_VALUE |
可表示的最小数 |
|
Number.NaN |
非数值 |
|
Number.NEGATIVE_INFINITY |
负无穷大 |
|
Number.POSITIVE_INFINITY |
正无穷大 |
三、数据类型
1.数值
所有的数值都以浮点数的形式进行表示，用Math对象中的函数可以完成比较复杂的运算；.toString()或者与字符串对象做+号连接也可以将数值转换成字符串；浮点数运算可能会出现一些问题，比如0.1+0.2!=0.3，但是整数的运算是精确的、可以先转换成整数再运算
2.字符串
用英文单引号或双引号括起来的字符序列，如果一行写不完用+号进行连接；汉字等unicode的字符满足str.charCodeAt(i)>255
(1)字符串和数值的转换
<script>
var a="123",b="111.2";
//字符串转换为数值
var c=parseInt(a)+parseFloat(b);
//数值转换为字符串
var str=c.toString();
document.write(str);
</script>
(2)正则表达式和replace()
|
replace(正则表达式或部分原字符串, 用于替换的字符串或者一个函数) |
返回替换后的新字符串 |
①正则表达式
/[\u4E00-\u9FA5]/匹配单个汉字
a.元字符
()[]{}/\|^$?*+.
b.可能出现的形式
|
^ |
在左中括号外表示开头 |
|
$ |
表示结尾 |
|
/[字符0…字符n]/ /[字符0…字符n]/g /[字符0…字符n]/i |
之间是或的关系，比较特殊的是[a-z]、[0-9]，g表示执行多次替换、i表示忽略大小写、不写表示执行一次替换 |
|
/[^字符0…字符n]选择 |
非字符0-字符n |
|
/表达式|表达式/选择 |
之间也是或的关系 |
|
/…(?:表达式)…/选择 |
非捕获性分组，不会在“$数字”中写数据 |
|
/...表达式0(?=表达式1).../选择 |
表达式0后面恰好是表达式1 |
|
/...表达式0(?!表达式1).../选择 |
表达式0后面恰好不是表达式1 |
|
/…表达式*表达式…/g |
贪婪匹配，“先吞下整个字符串，不匹配再一个个的去掉最后的字符”得到结果是尽可能长的数据 |
|
/…表达式*?表达式…/g |
惰性匹配，“先吞下第一个字符，不匹配再吞下一个”得到结果是尽可能短的多个数据 |
c.转义字符
|
\b |
单词边界 |
|
\B |
非单词边界 |
|
\d |
数字 |
|
\D |
非数字 |
|
\w |
单词字符，字母、数字、下划线 |
|
\W |
非单词字符 |
|
\s |
空格之类的字符 |
|
\S |
非空格 |
|
\” |
双引号，类似的有“\’”单引号 |
|
\u四位数字 |
unicode表中的字符 |
d.量词
小括号允许重复多个字符，中括号允许重复1个字符，大括号表示量词
|
? |
出现0次或一次 |
|
* |
出现0次或多次 |
|
+ |
出现1次或多次 |
|
{n} |
出现0次或n次 |
|
{n,m} |
出现n次不超过m次 |
|
{n,} |
至少出现n次 |
e.常用函数
|
正则表达式.test(字符串) |
字符串是否含有正则表达式的内容 |
|
正则表达式.exec(字符串) |
用正则表达式查找这个字符串，得到一个匹配的值 |
|
字符串.match(正则表达式) |
返回所有匹配值的数组 |
f.正则表达式的属性
|
$1…$9 |
匹配正则表达式中的第1…99个表达式的字符串 |
|
$& |
与正则表达式相匹配的字符串 |
|
$` |
与正则表达式相匹配的字符串左侧文本 |
|
$’ |
与正则表达式相匹配的字符串右侧文本 |
|
$$ |
表示$符号 |
|
global |
是否选择g |
|
ignoreCase |
是否选择i |
|
multiline |
是否选择m |
|
source |
返回正则表达式 |
(3)其他常用函数
|
toUpperCase()、toLowerCase() |
转换为大写、转换为小写 |
|
substring(起始位置,终止位置) |
获取子字符串，如果没有终止位置表示持续到字符串最后 |
|
match(正则表达式) |
用正则表达式查找这个字符串，并将符合的结果作为数组返回 |
3.布尔值
true和false
<!布尔值和数值、字符串的相互转换，布尔值转换为这两类在需要转换的对象前面加上!!即可-->
<script>
var a=true;
//布尔值转换为字符串
var str=a+"";
document.writeln(str);
//布尔值转换为数值
var num=a*1;
document.writeln(num);
</script>
4.null和undefined
null表示为空，变量定义但在初始化之前的值是undefined
5.数组
(1)定义数组
数组的定义通过new和构造函数Array()来实现，但是new可以省略
//定义空数组
var a=Array();
//定义带有元素的数组
var b=Array(1,2,3,"4","5");
//定义指定长度的数组
var c=Array(6);
//定义数组直接量
var d=[1,2,3,"4","5"];
(2)常用函数
通过下标修改和访问一个数组，通过.length属性可以访问数组的长度，数组的长度也是可以修改的
|
unshift() |
在数组的开头添加一个或多个元素 |
|
shift() |
在数组的开头删除一个元素 |
|
delete |
清空数组中的一个位置 |
|
push() |
在数组的末尾添加一个或多个元素 |
|
pop() |
从数组的末尾删除一个元素 |
|
concat() |
连接一个序列，返回连接后的数组 |
|
slice() |
返回抓取出来的数组，第一个参数是起始位置、第二个参数是终止位置 |
|
splice() |
修改数组中的任意元素、返回移除元素组成的数组，第一个参数表示位置、第二个参数表示移除的个数、后面的参数是要添加的序列 |
|
join() |
数组这个对象是可以直接输出的，可以用这个函数修改个元素间的连接符号、操作完成后返回字符串 |
|
split() |
用一个字符串做分隔符切分得到新数组 |
|
reverse() |
将原数组反序 |
|
sort(子函数) |
类似C语言中的sort()，需要写子函数返回排序后的数组 |
(3)对数组排序
应该重视的是子函数返回-1的情况
①排序
<script type="text/javascript">
function f(a, b) {
return a-b;
}
var arr = [ 3, 1, 2, 4, 5, 7, 6, 8, 0, 9 ];
arr.sort(f);
alert(arr);
</script>
②分开排列
<script type="text/javascript">
function f(a, b) {
if(a>Math.floor(a))return 1;
if(b>Math.floor(b))return -1;
}
var arr = [3.5,1.2,3,2.1,5,7,3];
arr.sort(f);
alert(arr);
</script>
6.对象
(1)BOM
BOM指的是浏览器对象模型，用于管理浏览器窗口
①window对象
即顶层对象、根节点，也是BOM的核心、代表浏览器窗口的一个实例；self、parent、top等顶层对象也是window对象，在标签<body>或<frameset>出现时被创建；window.innerWidth表示窗口的宽度、window.innerHeight表示窗口的高度，标签对象类似的也有自己的属性、比如tagName，可以通过javascript控制台的Watch找到
a.通过“window.”定义的变量可以被delete，而被定义的变量不能被delete；可以用“window.变量”安全的判断变量是否被定义过
<script type="text/javascript">
var a = "a";
window.b = "b";
alert(window.a);
alert(b);
//true，可以被delete
alert(delete window.b);
//false，不能被delete
alert(delete a);
alert(a);
//不能再被访问到
alert(b);
</script>
b.常用函数
|
open(url字符串, 表示方式选择的字符串, 表示样式特征的字符串,) |
打开新窗口、返回window对象； 表示方式选择的字符串：”_self”、”_blank”； 表示样式特征的字符串（”_blank”的时候有效，有明显作用只是前四个属性）： ”height=500,width=800,top=100,left=100,toolbar='no',menubar='no',scrollbars='no',resizable='no',location='no',status='no'” |
|
close() |
关闭窗口 |
|
onload() |
加载时使用的函数、一般是重写使用 |
|
setInterval(“函数名()”或函数对象, 毫秒数) |
每隔一定时间去调用这个函数，返回一个Number对象 |
|
clearInterval(Number对象) |
将这个计时器清除掉 |
|
setTimeout(函数名()”或函数对象, 毫秒数) |
经过一定时间后执行这个函数 |
②navigator对象
包含了浏览器的基本信息，部分属性：
|
appCodeName |
浏览器的类型 |
|
appName |
浏览器的名称 |
|
appVersion |
平台和版本信息 |
|
cookieEnable |
是否启用Cookie |
|
platfome |
浏览器使用的环境 |
|
userAgent |
客户机发送给服务器的user-agent头部信息 |
|
javaEnabled() |
浏览器是否启动java |
③screen对象
用于获取用户屏幕的信息
|
availWidth，width |
电脑屏幕宽度 |
|
availHeight，height |
电脑屏幕高度 |
|
screenLeft |
浏览器左上角横坐标 |
|
screenTop |
浏览器左上角纵坐标 |
④history对象
窗口的浏览历史，这几个方法和浏览器的前进后退功能一样
|
go(整数) |
负整数向前第几个历史记录，正整数表示向后第几个历史记录 |
|
back() |
回到上一个记录 |
|
forward() |
回到下一个记录 |
⑤location对象
含有当前网页的url信息，document中也有个location属性，但是这个属性只读
a.对url的说明
protocol协议//host主机名称:port端口号/pathname路径名称/?search键=值&键=值&…/#hash锚点名称
b.可能用到的函数
|
reload() |
重新加载当前文档 |
|
assign(“”)、replace(“”) |
加载新的文档 |
⑥document对象
表示整个html文档、可以用来访问其中的页面元素
a.常用函数
|
getElementsByTagName() |
根据标签名获取页面中的一个或一组标签对象 |
|
getElementById(“ID值”) |
根据id获取一个标签对象 |
|
write(“html字符串”)、writeln(“html字符串”) |
对页面写内容 |
(2)DOM
Elememnt元素的常用属性
可以通过getElementById()得到
innerHTML标签内的HTML内容
(3)自定义结构
//定义一个类似结构体的东西
var arr = {
a : true,
b : true,
c : "c",
d : "d",
e : function func(p) {
alert("I am arr.e's function."+p);
}
};
7.检测一个对象的数据类型
内置对象
//a可以是其他内置对象
var a= Date();
var b=Object.prototype.toString;
document.write(b.apply(a));
四、表达式和语句
JavaScript中没有%=这个运算符
五、函数
都有个arguments属性，这是一个表示传入参数的数组
1.定义一个函数
//下面两种不同的方式，f都是函数的名称，形参列表没有类型说明
function f(形参列表){
//函数体，可以包含return语句，return就是返回一个对象
}
var f=function(形参列表){
//函数体，可以包含return语句
}
2.比较特殊的闭包函数
函数内还有私有函数，且这个私有函数和内部定义的私有变量有关，最后返回私有函数
<script>
//下面示例的是一个累加的过程
function a(){
var n=0;
function b(m){
n+=m;
return n;
}
return b;
}
//闭包函数的使用方式
var c=a();
//b给m传入数据，另外在调用函数后n不会消失
document.write(c(0));
document.write("<br/>");
document.write(c(1));
document.write("<br/>");
document.write(c(2));
document.write("<br/>");
document.write(c(3));
document.write("<br/>");
document.write(c(4));
document.write("<br/>");
</script>
3.其他常用的内置函数
|
alert(字符串) |
提示对话框 |
|
confirm(字符串) |
提示对话框，但是有确认、取消按钮，返回值是true和false |
|
prompt(字符串,字符串) |
提示对话框、返回值是用户的输入，第二个参数表示输入框中的默认值、这个参数可以没有 |
|
typeof() |
返回某个对象的类型说明，是一个字符串 |
|
Math.floor(数据) |
将这个数据转换成整数 |
这些内置方法也可以重定义，比如：
<script type="text/javascript">
window.alert = function($1, $2) {
document.write($1 + "<br/>" + $2);
}
alert("<h1>title</h>","<p>符号大全</p>");
</script>
六、事件处理
1.使用UI事件
七、javascript进阶ajax
八、附录
1.设置FileZilla，对网站进行控制
打开FileZilla->文件->站点管理器，添加新站点；
选择“FTP-文件传输协议；
正确填写主机、端口号、用户名；
选择“如果可用，使用显式的FTP over TLS”；
登录类型选择“询问密码”；
其他设置选择默认，即可
2.javascript的调试
确定代码没有语法错误；
在源代码需要的地方加断点，使用关键字debugger；
进入浏览器的javascript控制台，比如360的ctrl+shift+i；
在watch中输入想要查看的变量，测试循环会出现“VM数字”，这时候可以用上“Resume script execution”这个按钮、可以继续测试
