目录
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 |
非单词边界 |
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”这个按钮、可以继续测试