JS初步及调试
1.Javascript是一种描述式语言,与html结合,用于增强功能
2.由NetScape公司利用sun的java开发。但与java完全不同的语言,与java类似的结构和语法,但为函数式语言。
3.客户端的JavaScript必须有浏览器的支持
4.JavaScript(ECMAScript):
基础语法、DOM(Document Object Model)、BOM(Brower Object Model)
5.常见的函数
alert(“字符串”); //弹出模态窗口
document.write(“字符串”); //典型的DOM语句
6. 在网页里加入JS:
js可以出现在html里的任意位置:一般函数定义出现在head里边,真正的操作语句出现在body里边
第①种方式:
<Script type = “text/javascript”>
alert(“hello,javascript!”);
</Script>
第②种方式:
<Script language = “javascript” src = “2.js”></Script>
在2.js中: alert(“hello,javascript!”);
7.一个页面可以有若干个<Script>…</Script>不同部分的方法和变量可以共享
js的变量为弱类型,所有的变量定义均以var来实现,区分大小系
var 变量名; //定义变量类型(建议) 也可以不定义,直接使用变量名(不建议)
变量名=…; //可以用 “字符串” 来赋值变量
例如:
<Script language = “javascript”>
var greeting;
greeting = “welcome to the js!”;
</Script>
…
<Script language = “javascript”>
document.write(greeting);
</Script>
8. 最朴素的两种调试方法:打印alert和删一段改一段
js难点在于调试:浏览器没法报错
ie浏览器-工具-internet选项-高级-取消”禁用脚本调试” 选中”显示每个脚本错误的通知”
报错弹出的窗口选择”显示详细信息”
在jsp中报错为动态页面转为静态页面的行号
JS基本语法
1.数组定义:
var arr = new Array(3); //可以定义数组长度,但是基本没用,因为超过长度仍然可以使用
arr[0]=1; arr[1]=2; arr[2]=3; arr[3]=4;
或 var arr = new Array(2,3,4,5);
js内部数组的样子:new出来属性名和属性值 相当于面向对象的成员变量
数组下标数字作为名字,数组元素值作为值
2.算术运算、逻辑运算、(与java相同的”+”)字符串连接、条件操作((…)?(…):(…))、while循环、
if-else分支、switch-case语句、for循环、do-while循环
//求字符串greeting的(从第0个开始数的)第3个字符开始一共截取9个字符的子集
greeting.substring(3,9);
//字符串长度的操作 在第3个位置上的字符(从第0个开始数的)
str.length str.charAt(3);
//获取当前时间
var today = new Date();
var hour = today.getHours(); //获取当前小时
函数 事件处理
1.在<Script>内部定义函数:
function 函数名(参数列表){
函数体;
}
2.在其他<Script>中可以调用该函数;
3.在函数体中可以有return语句,不必再function后面加上返回值类型(弱类型);
4.js事件处理:当网页上发生某些事件的时候会调用某些函数
onFocus:得到焦点的事件(用户为了输入而选择select、text、password、textarea等时)
<form name=“text”>
<input type=“text” name=“userName” value=“myname” οnfοcus=“javascript:alert(document.text.userName.value);”>
</form>
失去焦点的事件onBlur 值被改变且失去焦点的事件onChange
5.其他js事件处理
onClick:在button、checkbox、radio、link、reset、submit、text、textarea等对象被鼠标点中时
<img src=“my.jpg” onClick=“alert(‘ok’);”></img>
注意”javascript:alert(‘ok’);”//由于外边使用双引号 所以alert内部只能用单引号
onLoad出现在一个文档载入到一个窗口时
onUnload当用户退出一个文档时
<body onLoad=“javascript:alert(‘hello’);” onUnload=“javascript:alert(‘bye-bye’);”>
onMouseOver鼠标被移动到一个对象上是
onMouseOut鼠标从一个对象上移开时
onSelect当form对象中的内容被选中是
onsubmit出现在用户通过提交按钮提交一个表单时可以进行表单的验证
<Script type=“text/javascript”>
function check(){
if(document.test.t.value == ““){
alert(“空串不允许”);
return false;
}
return ture;
}
</script>
…
<form name=“test” action=“1.html” onSubmit=“return check()”>
<input type=“text” name=“t”>
<input type=“submit” name=“ok”>
</form>
…
内置对象_DOM_BOM
1.js的对话框
警告框:alert出现一个提示信息
询问框:prompt返回输入的值(很少使用)
var Name = prompt(“请输入你的名字:”);
document.write(“你好!”+Name);
确认框:confirm根据不同的选择返回true/false
2.js的内置对象
①this指的是当前的标签对象
②for…in后缀一个对象,此对象中的所有元素循环一次
for( i in arr) … arr(i) i是arr的下标也是arr成员变量的属性名字
③with为一段代码建立一个缺省的对象,任何无对象的属性引用,都将使用该缺省的对象
with(document){
write(“…”);
write(“…”);
write(“…”);
}
④new用于生成一个新的对象
3.BOM窗口中的对象和元素
window
n window.status=”hello,please look here”//状态栏
n window.open(“1.html”,”newWin”,”toolbar=no,left=200,top=100,menubar=no,
width=100,height=100,resizable=no”); //弹出新窗口(少用:浏览器拦截弹出窗口)
n var aHandle=window.open(...); //保存返回的句柄或钩子
n aHandle.close();
location:windows.location//地址栏里的内容或者 document.location 或者赋值转向某URL
history:history.back();
document
其他
1.产生动画常用的函数
setTimeOut(“show()”,80); //80ms后执行递归调用show()函数
setInterval
2. 表单验证:在onSubmit中调用check()函数 check()函数利用alert弹出窗口
var re=/^[0-9a-z][\w-.]* [0-9a-z]$/i
re.test(ssn) //利用正则表达式re验证ssn
form.xxx.focus() //xxx为form中的某个input的name 将输入焦点定位到错误的输入框
if(str.charCodeAt[i]>255) len+=2;else len++; //对于中文字符等其他字符占2个字节大小
3.表单验证v2.0:
<input ... onBlur=”check()”>
<div id=“userNameErr”></div>
在check()函数内部替换alert的方法:
document.getElementById(“userNameErr”).innerHTML=”<font color=’red’>请输入正确的用户名</font>” //在div之间动态指定样式(另起一行)也可以用span(不会另起一行)
document.getElementById(“userNameErr”).innerHTML=”” //当输入正确时候
4.后台框架
5.tree