JavaScript 基础基础,虽然基础但是很实用。
1 复制代码 代码如下: //页面中写入html内容 document.write("<h1>Hello World!</h1>")
2 复制代码 代码如下: //为了防止不支持 JavaScript 的浏览器把js当作为页面的内容来显示 //注释行末尾的两个正斜杠是 JavaScript 的注释符号,它会阻止 JavaScript 编译器对这一行的编译。 <script type="text/javascript"> <!-- document.write("Hello World!"); //--> </script>
3 复制代码 代码如下: //onload事件的多种写法 //第一种通过body标签加入onload事件 <script type="text/javascript"> function message(){ alert("该提示框是通过 onload 事件调用的。");} </script> <body onload="message()"> //第二种直接用window函数调用onload事件 <script type="text/javascript" language="javascript"> window.onload=message; function message(){ alert("该提示框是通过 onload 事件调用的。"); } </script>
4 //JavaScript 放置的位置 当页面载入时,会执行位于 body 部分的 JavaScript。(直接执行) 当被调用时,位于 head 部分的 JavaScript 才会被执行。 head 部分 包含函数的脚本位于文档的 head 部分。这样我们就可以确保在调用函数前,脚本已经载入了。
5. //分号的作用 //分号是可选的(根据 JavaScript 标准),浏览器把行末作为语句的结尾,通过使用分号,可以在一行中写多条语句。
6。 //JavaScript 变量名称的规则: 变量对大小写敏感(y 和 Y 是两个不同的变量) 变量必须以字母或下划线开始
7。 //变量的声明 如果您所赋值的变量还未进行过声明,该变量会自动声明。 例: x=5; carname="Volvo"; 与后面的这些语句的效果相同:var x=5; var carname="Volvo";
8。 //比较运算符 运算符 描述 例子 === 全等(值和类型) x===5 为 true; x==="5" 为 false
9。 //条件运算符(三目运算符) JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。 name=("liuhuan"=="LH")?"刘欢":"歌星";
10。 //获得当前系统时间(小时数) var d = new Date() var time = d.getHours()
11。 //随机数 var num=Math.random(); 产生的伪随机数介于 0 和 1 之间(含 0,不含 1),也就是,返回值可能为0,但总是小于1。在第一次加载 JScript 时随机数发
生器自动产生 。
12。 //获取今天的星期数(星期日为0,星期1-6为1-6) var d = new Date() theDay=d.getDay()
13。 //按钮的触发事件 <input type="button" onclick="disp_alert()" value="显示警告框" />
14。 //弹出框内容换行 alert("再次向您问好!在这里,我们向您演示" + '\n' + "如何向警告框添加折行。")
15. //确认框(删除方法) //confirm("文本") <script type="text/javascript"> function show_confirm() { var r=confirm("确认删除?"); if (r==true) { alert("删除成功!"); } else{ alert("删除失败!"); } } </script>
16. //于用户交互的弹出框(可输入文字的提示框) //prompt("文本","默认值") <script type="text/javascript"> function disp_prompt() { var name=prompt("请输入您的名字","Bill Gates") if (name!=null && name!=""){ document.write("你好!" + name + " 今天过得怎么样?") } } </script>
17。 //带有参数并返回值的函数 <head> <script type="text/javascript"> function product(a,b) { return a*b; } </script> </head> <body> <script type="text/javascript"> document.write(product(6,5)) </script> </body>
18。 //for循环 (本例中动态生成html中的h标签) <body> <script type="text/javascript"> for (i = 1; i <= 6; i++){ document.write("<h" + i + ">这是标题 " + i) document.write("</h" + i + ">") } </script> </body>
19。 //break跳出语句 <script type="text/javascript"> var i=0 for (i=0;i<=10;i++){ if (i==3){break} document.write("数字是 " + i) document.write("<br />") } </script> <p>解释:循环会在 i=3 时中断。</p>
20。 //continue跳出语句 <script type="text/javascript"> var i=0 for (i=0;i<=10;i++){ if (i==3){continue} document.write("数字是 " + i) document.write("<br />") } </script> <p>解释:当 i=3 时,会中断循环,并从下一个值开始继续循环。</p> 值为:01245678910
21。 //for in循环(相当于.net中的foreach循环) <html> <body> <script type="text/javascript"> var x var mycars = new Array() mycars[0] = "宝马" mycars[1] = "奔驰" mycars[2] = "宾利"
for (x in mycars) { document.write("x的值为"+x+ "<br />"); document.write(mycars[x] + "<br />") } </script> </body> </html>
22。 //javascript事件 onload 某个页面或图像被完成加载 //页面加载 onunload 用户退出页面
onfocus 元素获得焦点 onblur 元素失去焦点 //表单验证 onchange 用户改变域的内容 onreset 重置按钮被点击 onsubmit 提交按钮被点击 //用于在提交表单之前验证所有的表单域。 例如: (当用户单击表单中的确认按钮时,checkForm() 函数就会被调用。checkForm() 函数的返回值是 bool类型,如果返回值为true,则
提交表单,反之取消提交。) <form method="post" action="xxx.htm" onsubmit="return checkForm()">
onkeydown 某个键盘的键被按下 onkeypress 某个键盘的键被按下或按住 //键盘操作 onkeyup 某个键盘的键被松开
onclick 鼠标点击某个对象 ondblclick 鼠标双击某个对象 onmousedown 某个鼠标按键被按下 //鼠标操作 onmousemove 鼠标被移动 onmouseout 鼠标从某元素移开 onmouseover 鼠标被移到某元素之上 onmouseup 某个鼠标按键被松开
onabort 图像加载被中断 onerror 当加载文档或图像时发生某个错误
onresize 窗口或框架被调整尺寸 onselect 文本被选定
23。 //js中的错误提示 err.description及其try...catch 语句 例如: <script type="text/javascript"> var txt="" function message(){ try{ adddlert("Welcome guest!") } catch(err){ txt="本页中存在错误。\n\n" txt+="错误描述:" + err.description + "\n\n" txt+="点击“确定”继续。\n\n" alert(txt); } } </script>
24。 //带有确认框的 try...catch 语句 <head> <script type="text/javascript"> var txt="" function message(){ try{ adddlert("Welcome guest!") } catch(err){ txt="本页中存在错误。\n\n" txt+="点击“确定”继续查看本页,\n" txt+="点击“取消”返回首页。\n\n" if(!confirm(txt)) { document.location.href="../index.html" } } } </script> </head> <body> <input type="button" value="查看消息" onclick="message()" /> </body>
25。 //创建 exception(异常或错误)。(配合try...catch语句使用) 例如: <script type="text/javascript"> var x=prompt("请输入 0 至 10 之间的数:","") try{ if(x>10) throw "Err1" else if(x<0) throw "Err2" else if(isNaN(x)) throw "Err3" } catch(er){ if(er=="Err1") alert("错误!该值太大!") if(er == "Err2") alert("错误!该值太小!") if(er == "Err3") alert("错误!该值不是数字!") } </script>
26。 //return true和return true的用法 (它可以返回一个bool型的参数,继续用于判断) function jiance(msg,url,l){ alert("你确定吗?") return true } function jieguo(){ if(jiance()){ alert("是"); } else{ alert("否"); } }
27. //onerror 事件 <html><head> <script type="text/javascript"> //当出现错误时触发onerror事件 onerror=handleErr; var txt="" function handleErr(msg,url,l){ txt="本页中存在错误。\n\n" txt+="错误:" + msg + "\n" txt+="URL: " + url + "\n" txt+="行:" + l + "\n\n" txt+="点击“确定”继续。\n\n" alert(txt) return true } function message(){ adddlert("确定吗?") } </script> </head><body> <input type="button" value="查看消息" onclick="message()" /> </body></html>
28。 //JavaScript 中使用反斜杠来向文本字符串添加特殊字符。 例如: var txt="We are the so-called \"Vikings\" from the north." document.write(txt)
29。 //javascript注意事项 1。JavaScript 对大小写敏感 2。JavaScript 会忽略多余的空格 3。在编写代码时可以使用反斜杠进行换行 例: document.write("Hello \
World!"); |