JS的学习
来源：互联网 发布：最好的电子狗软件 编辑：程序博客网 时间：2024/06/05 06:20
Alert弹框两种方式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title> alert弹出框 </title> <meta http-equiv = "content-type" content ="text/html;charset=utf-8" /> <meta name="keywords" content=""> <meta name="description" content=""> <script type="text/javascript"> // alert("你好，我是alert弹出框")</script> </head> <body onload="alert('你好，我是alert弹出框')"> </body></html>变量的使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title> new document </title> <meta http-equiv = "content-type" content ="text/html;charset=utf-8" /> <meta name="keywords" content=""> <meta name="description" content=""> <script type="text/javascript"> //JS的变量的使用同Java一样也是先声明后使用的 var定义变量 var myname = "张三"; var age = 21; var address = "北京海淀"; var str = myname + ",年龄:" + age + "籍贯:" + address; alert( str ); </script> </head> <body> </body></html>typeof的使用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>typeof的功能和用法演示</title><script type="text/javascript">document.write("<h2>对变量或值调用typeof运算符返回值：</h2>");var width,height=10,name="rose";var date=new Date(); //获得时间日期对象var arr=new Array(); //定义数组document.write("width: "+typeof(width)+"<br>");document.write("height: "+typeof(height)+"<br>");document.write("name: "+typeof(name)+"<br>");document.write("date: "+typeof(date)+"<br>");document.write("arr: "+typeof(arr)+"<br>");document.write("true: "+typeof(true)+"<br>");document.write("null: "+typeof(null));</script></head><body></body></html>结果
对变量或值调用typeof运算符返回值：width: undefinedheight: numbername: stringdate: objectarr: objecttrue: booleannull: object 数据类型转换
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>数据类型转换</title><script type="text/javascript"> var str1 = "123.09abc", str2 = "abc123.09"; var num; // num = parseInt(str1); // num = parseFloat(str1); // num = parseFloat(str1); // num = str1.toString(); // num = parseInt(str2); // num = parseFloat(str2); // num = str2.toString(); // num = Boolean(str1); // num = Number(str1); // num = String(str1); document.write( num +"<br/>类型为："+ typeof num );</script></head><body></body></html>结果分别为：
//num = parseInt(str1);123 类型为：number //num = parseFloat(str1);123.09 类型为：number //num = parseFloat(str1);123.09 类型为：number //str1.toString();123.09abc 类型为：string //num = parseInt(str2);NaN 类型为：number //num = parseFloat(str2);NaN 类型为：number //num = str2.toString();abc123.09 类型为：string//num = Boolean(str1);true 类型为：boolean //num = Number(str1);NaN 类型为：number // num = String(str1);123.09abc 类型为：string 总结一下
- parseInt(cString )从字符串cString非空字符开始转换得到的整数,遇到小数点或其他0-9外的字符就停止，如“-1234a”,“-1234.0”都将返回 -1234；如果除第一个符号外一个0-9字符都不是，将返回NaN,如“-a”、“abc”等； - Number( cString )从字符串cString转换得到的数字，包括Int和Float类型，如：“-123”返回-123，“123”和“00123”都返回 123，“234.56”返回234.56等。cString必须是合法的数字串，否则返回NaN；如“.123”、“1.23.45”、 “--123”、“123a"都返回NaN. - 总之Number( )更象parseFloat( )，Number对参数更挑剔，稍有不是数字就返回NaN。parseFloat支持第一个非空字符为小数点，如parseFloat(".123" )返回0.123。而Number(".123" )返回NaN。空字符串或完全空格串健壮的parseFloat()返回NaN，而Number()返回0，这有点让人费解。除了不支持无前导0小数 （如.123、-.123）和支持多余的前导0(如-00123返回-123)多少不符合常规外，Number能用来验证数字串！输入和输出
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>输出Hello World</title><script type="text/javascript"> if( confirm("是否开始运行程序？") ){ var j=prompt("请输入连续输出'hello world！'的次数：",1); if( j < 0 )alert("请输入大于0的整数"); for(var i=0;i<j;i++){ if( i==0 )document.write("<h3>开始输出</h3>"); document.write("<h3>Hello World</h3>"); if( i==j-1 )document.write("<h3>结束输出，共输出了"+j+"次.</h3>"); } }else{ alert("你已经放弃了执行程序"); }</script></head><body></body></html>结果
开始输出Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World结束输出，共输出了10次.break与continue的使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title> 演示示例：break与continue </title> <meta http-equiv = "content-type" content ="text/html;charset=utf-8" /> <meta name="keywords" content=""> <meta name="description" content=""> </head> <body> <script type="text/javascript"> // break 中断循环 document.write("<br/>---------------break 中断循环------------<br/>"); var i=0; for (i=0;i<=10;i++) { if (i==3){break;} document.write("The number is " + i); document.write("<br />"); } </script> <script type="text/javascript"> // continue 跳过并继续接下来的循环 document.write("<br/>---------------continue 中断循环------------<br/>"); var i=0; for (i=0;i<=10;i++) { if (i==3){continue;} document.write("The number is " + i); document.write("<br />"); } </script> </body></html>结果
---------------break 中断循环------------The number is 0The number is 1The number is 2---------------continue 中断循环------------The number is 0The number is 1The number is 2The number is 4The number is 5The number is 6The number is 7The number is 8The number is 9The number is 10for in的使用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>数据类型转换</title><script type="text/javascript"> for ( var a in window ) { document.write(a + "------" +window[a]+"<br/>"); }</script></head><body></body></html>结果
a------aonpointercancel------nullonpointerdown------nullonpointerenter------nullonpointerleave------nullonpointermove------nullonpointerout------nullonpointerover------nullonpointerup------nullindexedDB------undefinedmsIndexedDB------undefinedclientInformation------[object Navigator]clipboardData------[object DataTransfer]closed------falsedefaultStatus------event------undefinedreturn的使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title> return 返回值 </title> <meta http-equiv = "content-type" content ="text/html;charset=utf-8" /> </head> <body> <script text="type/javascript"> function sum(iNum1, iNum2) { return iNum1 + iNum2; alert(iNum1 + iNum2); } document.write(sum(1,3)+"<br/>"); //函数中可能有多个 return 语句 返回数据 结束方法体 //例如，返回两个整数的差值 function diff(iNum1, iNum2) { if (iNum1 > iNum2) { return iNum1 - iNum2; } else { return iNum2 - iNum1; } } document.write(diff(33,21)+"<br/>"); document.write(diff(21,33) +"<br/>"); </script> </body></html>结果
41212siwtch的使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>switch 语句</title><script type="text/javascript" > var hours = window.prompt("请输入一个0-24的时间点数字"); hours = parseInt(hours);//把字符串类型转为整型 switch( hours ) { case 12: case 13: case 14: case 15: case 16: case 17: case 18: document.write("<h3>下午好！欢迎来到贵美。</h3>"); break; case 19: case 20: case 21: case 22: case 23: case 24: document.write("<h3>晚上好！欢迎来到贵美。</h3>"); break; default: document.write("<h3>上午好！欢迎来到贵美。</h3>"); }</script></head><body></body></html>try catch语句
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>输出Hello World</title><head><script type="text/javascript"> var txt = ""; try{ adddlert("Wellcome guest~"); }catch(err){ txt="此页面存在一个错误。\n\n" ; txt+="错误描述: " + err.message + "\n\n"; txt+="点击“确定”继续。\n\n"; alert(txt); } </script></head><body> </body></html>结果
此页面存在一个错误未定义 adddlert常见事件应用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title> new document </title> <meta http-equiv = "content-type" content ="text/html;charset=utf-8" /> <meta name="keywords" content=""> <meta name="description" content=""> </head> <body onload = "dosomething()"> <form onsubmit = "return oncheck();"> <p><label for="username">用户名：</label><input type="text" name="username" id="username" onfocus = "this.value = '';" onblur="if(this.value == '')alert('用户名不能为空');" value="请输入你的用户名" /></p> <p><label for="pwd">密码：</label><input type="password" name="pwd" id="pwd" ></p> <p><input type="checkbox" id="re" name="re" onclick = "alert('你选择了记住密码')" ><label for="re">记住密码</label></p> <p> <input type="submit" name="" value="登录" /> <input type="reset" name="pwd" value="取消"> </p> </form> <script type="text/javascript"> function dosomething(){ alert("页面加载完成，欢迎来到登录页面"); } function oncheck(){ if( confirm("确定提交登录吗？") ){ return true; }else{ return false; } } </script> </body></html>可以自己运行一下
一个留言板的小例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>留言板</title><script type="text/javascript"> function isSub(){ if( confirm("是否提交留言？") ){ return true; }else{ return false; } }</script></head><body><form onsubmit = "return isSub();"> <div><label for="title">留言标题</label><input type="text" name="title" id="title" /></div> <div><label for="content">留言内容</label><textarea name="content"></textarea></div> <div><input type="submit" name="title" id="title" /></div> </form></body></html>结束
java技术交流群 456245623
0 0
- js的学习
- 学习js的网站
- 学习JS的建议
- 9. js的学习
- js 的学习
- js的学习
- JS 的 DOM 学习
- js的Ajax学习
- js的Ajax学习
- moment.js的学习
- js学习的好书
- JS的学习小记
- JS的string学习
- JS的学习
- Fabric.js的学习
- 学习的JS放大镜
- vue.js的学习
- Echarts.js的学习
- Linux ps命令详解与示例说明
- http的各个状态码代表的意思
- JavaEE：Hibernate笔记
- leetcode(16).38. Count and Say
- 机器学习小组知识点14：均匀分布（Uniform Distribution）
- JS的学习
- 数据库索引的创建原则
- Linux 中rsync 详解 备份或同步必选
- pod 淘宝镜像不能用了卡着不动
- LayoutInflater源码分析之Inflate
- 玩具谜题（NOIP2016提高组Day1T1）
- 加速计陀螺仪6轴数据融合算法解析
- C与指针 三 可变参数的限制
- 浅析javax.servlet.Servlet,ServletContext接口
