有关JavaScript的一些基本用法
2012-09-07 20:42
423 查看
最近一直在学习一些关于JavaScript的一些知识，觉得JavaScript确实很强大，在Web应用方面来讲，在控制客户前端的浏览器方面，本人觉得JavaScript的确是一门强大的语言，其实JavaScript本身是一门很容易上手的语言，我在回顾JavaScript基础的时候通过写一点例子来进行加深印象，突然觉得JavaScript确实有很多值得学习的地方，下面的一些代码就是一些初步的联系，对于一些JavaScript的初学者，大家可以稍微借鉴一下，相应的代码也写了注释，这些代码都是正确的可以执行的，拷到记事本中重命名为.html就可以执行。
<html>
<head><title>js test</title>
<script type="text/javascript">
//全选框
function checked_all(str){
var temps = document.getElementsByName("temp")
for(var i=0;i<temps.length;i++){
temps[i].checked=str.checked;
}
}
function judge(){
alert("hello world!!!");
alert(typeof "ds");
}
//判断文本框是否为空
function judgeNull(){
if(document.getElementById("name").value==""){
alert("null!");
return false;
}
}
//点击出现一个九九乘法表
function nine(){
document.write("<table>");
for(var i=1;i<=9;i++){
document.write("<tr>");
for(var j=1;j<=i;j++){
document.write("<td>"+j+"*"+i+"="+j*i+"</td>");
}
document.write("</tr>");
}
document.write("</table>");
}
//确认框
function show_confirm(){
var r = confirm("确认框！");
if(r == true){
alert("确认");
}else{
alert("取消");
}
}
//提示框
function show_prompt(){
var name=prompt("请输入姓名：","B君");
if(name!=null&&name!=""){
document.write("这个人是:"+name);
}
}
//for(...in..)方法
function show_forin(){
var x;
var mycars = new Array();
mycars[0]="xxxxx";
mycars[1]="yyyyy";
mycars[2]="ggggg";
for(x in mycars){
document.write(mycars[x]+"<br/>");
}
}
//try_catch使用
function show_trycatch(){
var txt = "";
try{
alertt("try catch 的使用");
}catch(err){
txt="错误信息"+err.description ;
alert(txt);
}
}
//onerror使用
onerror=handleErr;
var txt="";
function handleErr(msg,url,l){
txt="There is an error on this page.\n\n";
txt+="Error:"+msg+"\n"; //打印出错误信息
txt+="URL:"+url+"\n";
txt+="Line:"+l+"\n\n";
alert(txt);
return true;
}
function show_error(){
alrrert("onerror事件");
}
//制作一个时钟
function show_clock(){
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTimes(m);
s = checkTimes(s);
document.getElementById("mydiv").innerHTML=h+":"+m+":"+s;
t = setTimeout('show_clock()',500);
}
function checkTimes(i){ //将显示的时间的分钟和秒前面加“0”
if(i<10){
i="0"+i;
}
return i;
}
//数组排序
function show_arrsort(){
var arr = new Array(6);
arr[0] = 10;
arr[1] = 2;
arr[2] = 5;
arr[3] = 3;
arr[4] = 90;
arr[5] = 8;
document.getElementById("mydiv2").innerHTML = arr.sort(sortNumber);//用于在页面上输出排序后的数组
}
function sortNumber(a,b){
return a-b; //自定义比较器进行比较数组中元素的大小
}
function show_random(){
document.write(Math.floor(Math.random()*11));//点击出现一个0-10之间的随机数，并且取整
}
//正则表达式匹配
function show_test(){
var a = new RegExp("e");
document.write(a.test("hello world")+"<br/>");//判断当前字符串中是否含有"e",返回结果是true
document.write(a.test("aaaaaaa")); //返回结果是false;
}
function show_exec(){
var c = new RegExp("hello");
document.write(c.exec("hello world!!!")+"<br/>");
document.write(c.exec("good times!!!"));
}
function show_compile(){//conpile()方法用于改变RegExp的检索模式
var a = RegExp("e");
document.write(a.test("hello world!!!")+"</br>");
a.compile("a");
document.write(a.test("hello world!!!"));
}
function show_version(){
alert("浏览器的名称"+navigator.appName+"\n"+"浏览器的版本"+navigator.appVersion);
}
</script>
</head>
<body>
<input type="button" value="click" onClick="judge()"/>
<input type="text" id="name" />
<input type="button" value="click2" onClick=" return judgeNull()"/>
<input type="button" value="看！点击出来99表" onClick="nine()"/>
<input type="button" value="点击的是确认框" onClick="show_confirm()"/>
<input type="button" value="点击的是提示框" onClick="show_prompt()"/>
<input type="button" value="for in语句的使用" onClick="show_forin()"/>
<input type="button" value="try_catch语句的使用" onClick="show_trycatch()">
<input type="button" value="onerror捕获异常" onClick="show_error()">
<input type="button" value="这是一个时钟" onClick="show_clock()">
<input type="button" value="点击出现数组并排序" onClick="show_arrsort()">
<p>
<input type="button" value="点击出现一个随机数" onClick="show_random()">
<input type="button" value="点击使用RegExp的test方法" onClick="show_test()">
<input type="button" value="点击使用RegExp的exec方法" onClick="show_exec()">
<input type="button" value="点击使用RegExp的compile方法" onClick="show_compile()">
<input type="button" value="点击查看浏览器的版本信息" onClick="show_version()">
</p>
<br/>
<p>
<a href="#" onmouseover="alert('this is a mouseover event');return false;">hello world</a>
<p>
<a href="#" onmouseout="alert('this is a mouseout event');return false;">hello myGirl</a>
</p>
<div id="mydiv"></div>
<div id="mydiv2"></div>
<div>
<input type="checkbox" name="temp"/>计算机1</br>
<input type="checkbox" name="temp"/>计算机2</br>
<input type="checkbox" name="temp"/>计算机3</br>
<input type="checkbox" name="temp"/>计算机4</br>
<input type="checkbox" name="tempall" onClick="checked_all(this)"/>全选
</div>
</body>
</html>
这就是一些很基础的应用，希望能对一些刚刚开始接触JavaScript的朋友们有所帮助
<html>
<head><title>js test</title>
<script type="text/javascript">
//全选框
function checked_all(str){
var temps = document.getElementsByName("temp")
for(var i=0;i<temps.length;i++){
temps[i].checked=str.checked;
}
}
function judge(){
alert("hello world!!!");
alert(typeof "ds");
}
//判断文本框是否为空
function judgeNull(){
if(document.getElementById("name").value==""){
alert("null!");
return false;
}
}
//点击出现一个九九乘法表
function nine(){
document.write("<table>");
for(var i=1;i<=9;i++){
document.write("<tr>");
for(var j=1;j<=i;j++){
document.write("<td>"+j+"*"+i+"="+j*i+"</td>");
}
document.write("</tr>");
}
document.write("</table>");
}
//确认框
function show_confirm(){
var r = confirm("确认框！");
if(r == true){
alert("确认");
}else{
alert("取消");
}
}
//提示框
function show_prompt(){
var name=prompt("请输入姓名：","B君");
if(name!=null&&name!=""){
document.write("这个人是:"+name);
}
}
//for(...in..)方法
function show_forin(){
var x;
var mycars = new Array();
mycars[0]="xxxxx";
mycars[1]="yyyyy";
mycars[2]="ggggg";
for(x in mycars){
document.write(mycars[x]+"<br/>");
}
}
//try_catch使用
function show_trycatch(){
var txt = "";
try{
alertt("try catch 的使用");
}catch(err){
txt="错误信息"+err.description ;
alert(txt);
}
}
//onerror使用
onerror=handleErr;
var txt="";
function handleErr(msg,url,l){
txt="There is an error on this page.\n\n";
txt+="Error:"+msg+"\n"; //打印出错误信息
txt+="URL:"+url+"\n";
txt+="Line:"+l+"\n\n";
alert(txt);
return true;
}
function show_error(){
alrrert("onerror事件");
}
//制作一个时钟
function show_clock(){
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTimes(m);
s = checkTimes(s);
document.getElementById("mydiv").innerHTML=h+":"+m+":"+s;
t = setTimeout('show_clock()',500);
}
function checkTimes(i){ //将显示的时间的分钟和秒前面加“0”
if(i<10){
i="0"+i;
}
return i;
}
//数组排序
function show_arrsort(){
var arr = new Array(6);
arr[0] = 10;
arr[1] = 2;
arr[2] = 5;
arr[3] = 3;
arr[4] = 90;
arr[5] = 8;
document.getElementById("mydiv2").innerHTML = arr.sort(sortNumber);//用于在页面上输出排序后的数组
}
function sortNumber(a,b){
return a-b; //自定义比较器进行比较数组中元素的大小
}
function show_random(){
document.write(Math.floor(Math.random()*11));//点击出现一个0-10之间的随机数，并且取整
}
//正则表达式匹配
function show_test(){
var a = new RegExp("e");
document.write(a.test("hello world")+"<br/>");//判断当前字符串中是否含有"e",返回结果是true
document.write(a.test("aaaaaaa")); //返回结果是false;
}
function show_exec(){
var c = new RegExp("hello");
document.write(c.exec("hello world!!!")+"<br/>");
document.write(c.exec("good times!!!"));
}
function show_compile(){//conpile()方法用于改变RegExp的检索模式
var a = RegExp("e");
document.write(a.test("hello world!!!")+"</br>");
a.compile("a");
document.write(a.test("hello world!!!"));
}
function show_version(){
alert("浏览器的名称"+navigator.appName+"\n"+"浏览器的版本"+navigator.appVersion);
}
</script>
</head>
<body>
<input type="button" value="click" onClick="judge()"/>
<input type="text" id="name" />
<input type="button" value="click2" onClick=" return judgeNull()"/>
<input type="button" value="看！点击出来99表" onClick="nine()"/>
<input type="button" value="点击的是确认框" onClick="show_confirm()"/>
<input type="button" value="点击的是提示框" onClick="show_prompt()"/>
<input type="button" value="for in语句的使用" onClick="show_forin()"/>
<input type="button" value="try_catch语句的使用" onClick="show_trycatch()">
<input type="button" value="onerror捕获异常" onClick="show_error()">
<input type="button" value="这是一个时钟" onClick="show_clock()">
<input type="button" value="点击出现数组并排序" onClick="show_arrsort()">
<p>
<input type="button" value="点击出现一个随机数" onClick="show_random()">
<input type="button" value="点击使用RegExp的test方法" onClick="show_test()">
<input type="button" value="点击使用RegExp的exec方法" onClick="show_exec()">
<input type="button" value="点击使用RegExp的compile方法" onClick="show_compile()">
<input type="button" value="点击查看浏览器的版本信息" onClick="show_version()">
</p>
<br/>
<p>
<a href="#" onmouseover="alert('this is a mouseover event');return false;">hello world</a>
<p>
<a href="#" onmouseout="alert('this is a mouseout event');return false;">hello myGirl</a>
</p>
<div id="mydiv"></div>
<div id="mydiv2"></div>
<div>
<input type="checkbox" name="temp"/>计算机1</br>
<input type="checkbox" name="temp"/>计算机2</br>
<input type="checkbox" name="temp"/>计算机3</br>
<input type="checkbox" name="temp"/>计算机4</br>
<input type="checkbox" name="tempall" onClick="checked_all(this)"/>全选
</div>
</body>
</html>
这就是一些很基础的应用，希望能对一些刚刚开始接触JavaScript的朋友们有所帮助
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JavaScript中的一些基本用法
- JavaScript中对象的一些基本用法
- javascript 一些基本用法
- Android Dialog对话框的一些基本用法
- 表单的一些基本用法与技巧
- 关于URL 通信的一些基本用法
- java中的 FileWriter类 和 FileReader类的一些基本用法
- JavaScript学习 - 基本用法
- JavaScript的一些基本知识 -- 数组
- 关于sqlite的一些基本用法
- Elasticsearch学习总结二 elasticSearch一些基本用法
- 有关iPhone UIDevice UIApplication的一些常见用法
- MongoDB基本介绍及一些用法
- javascript操作select的一些基本方法总结
- javascript的setTimeout用法,以及一些bug的解决
- JavaScript日期对象(Date)基本用法示例
- 关于DSP的一些基本知识和用法（资料来源于合众达网页）
- JQuery Ajax一些基本用法
- fmdb的一些基本的用法
- ssh，scp的一些基本用法