《事半功倍系列 javascript》代码
来源:互联网 发布:制作网页用什么软件 编辑:程序博客网 时间:2024/06/04 23:20
- 教程:事半功倍系列之javascript From:向东IT博客
- 本文由经典论坛 邓永炎 整理
- 清华大学出版的《事半功倍系列 javascript》,本人照着书敲出来的,有些翻译了一下.前几年看了一下,最近无事,重新翻了翻,很有帮助.本书应该有光盘的,但学校的书,光盘不知在哪.希望对你学 javascript有帮助
- 第一章javascript简介
- 1.在地址栏输入javascript语句
- Javascript:Document.write("显示文字")
- 2.将javascript嵌入 HTML文档
- <script language=javascript>
- document.bgColor="blue"
- </script>
- 第二章 使用变量和数组
- 1.声明变量
- <script language=javascripe>
- Var answer1,answer2,answer3,answer4;
- answer1=9;
- answer2=2.5
- answer3="Milkey May"
- answer4=true
- </script>
- 2.使用整数
- <script language=javascript>
- var decimalNum,hexadecimalNum,octalNum
- decimalNum=24
- hexadecimalNum=0×24
- octalNum=024
- document.write("显示十进制数:"+ decimalNum+"<br>")
- document.write("显示十六进制数:"+ hexadecimalNum +"<br>")
- document.write("显示八进制数:"+ octalNum +"<br>")
- </script>
- 3.使用浮点数
- <script language=javascript>
- var num1,num2,num3,num4
- num1=1234567890000.0
- num2=5.14e23
- num3=0.0000123456
- num4=6.0254e3-4
- document.write("浮点数1:"+num1+"<br>")
- document.write("浮点数2:"+num2+"<br>")
- document.write("浮点数3:"+num3+"<br>")
- document.write("浮点数4:"+num4+"<br>")
- </script>
- 4.使用布尔值
- <script language=javascript>
- var answer1,answer2
- answer1=true
- answer2=false
- document.write("显示布尔1:"+answer1+"<br>")
- document.write("显示布尔2:"+answer2+"<br>")
- </script>
- 5.使用字符串
- <script language=javascript>
- var str1,str2
- str1="fdsgdg dsfdsf china"
- str2="武汉市广播电视大学"
- document.write("显示字符串1:"+str1+"<br>")
- document.write("显示字符串2:"+str2+"<br>")
- </script>
- 6.确定变量类型
- <script>
- var answer1,answer2,answer3,answer4
- answer1=9
- answer2=2.5
- answer3="milky may"
- answer4=true
- document.write("变量1的类型是:"+typeof answer1 +"<br>")
- document.write("变量2的类型是:"+typeof answer2 +"<br>")
- document.write("变量3的类型是:"+typeof answer3 +"<br>")
- document.write("变量4的类型是:"+typeof answer4 +"<br>")
- </script>
- 7.将字符串转换成数字
- <script>
- var str1="31 days in january"
- var int1=parseInt(str1)
- document.write("str1的数据类型是 :"+typeof str1+"<br>")
- document.write("int1的数据类型是 :"+typeof int1+"<br>")
- </script>
- 8.将数字转换成字符串
- <script>
- var int1=256
- var str1=""+int1
- document.write("str1的数据类型是 :"+typeof str1+"<br>")
- document.write("int1的数据类型是 :"+typeof int1+"<br>")
- </script>
- 9.声明数组
- <script>
- array=new Array(5)
- array[0]=1
- array[1]=3
- array[2]=5
- array[3]=7
- array[4]=11
- document.write("数组是:"+array[0]+" "+array[1]+" "+array[2]+" "+array[3]+" "+array[4])
- </script>
- 10.确定数组元素的个数
- <script>
- array=new Array(5)
- array[0]=1
- array[1]=3
- array[2]=5
- array[3]=7
- array[4]=11
- document.write("数组是:"+array[0]+" "+array[1]+" "+array[2]+" "+array[3]+" "+array[4]+"<br>")
- document.write("数组的元素个数是"+array.length)
- </script>
- 11.将数组转换为字符串
- <script>
- array=new Array()
- array[0]="dark"
- array[1]="apple"
- array[2]="nebula"
- array[3]="water"
- str1=array.join()
- str2=array.join(" ")
- document.write(str1+"<br>")
- document.write(str2)
- </script>
- 12.对数组排序
- <script>
- array=new Array()
- array[0]="dark"
- array[1]="apple"
- array[2]="nebula"
- array[3]="water"
- str1=array.sort()
- document.write(str1+"<br>")
- </script>
- 第三章 创建表达式
- 本文摘自:拾金者(http://www.xkde.com) 详细出处参考:http://www.xkde.com/WapContent-199-9524.aspx?ppp=1
- 1.使用算术运算符
- <script>
- var1=12
- var2=10
- varadd=var1+var2
- varsub=var1-var2
- varmult=var1*var2
- vardiv=var1/var2
- varmod=var1%var2
- document.write("数据1是:"+var1+"<br>")
- document.write("数据2是:"+var2+"<br>")
- document.write("数据相加是:"+varadd+"<br>")
- document.write("数据相减是:"+varsub+"<br>")
- document.write("数据相乘是:"+varmult+"<br>")
- document.write("数据相除是:"+vardiv+"<br>")
- document.write("数据相除取余数是:"+varmod+"<br>")
- </script>
- 2.递增变量和递减变量
- <script>
- days=1
- document.write("输出变量"+days+"<br>")
- days++
- document.write("递增后变量变为:"+days)
- </script>
- 3.创建比较表达式
- <script>
- daysofmonth=28
- if(daysofmonth==28)
- month="february"
- document.write("days of month:"+daysofmonth+"<br>")
- document.write("month:"+month)
- </script>
- 4.创建逻辑表达式
- <script>
- dayofmonth=28
- if(dayofmonth==28 || dayofmonth==29)
- month="february"
- document.write("days of month:"+dayofmonth+"<br>")
- document.write("month:"+month)
- </script>
- 5.使用条件运算符
- <script language="javascript">
- stomach="hungry";
- time="5:00";
- (stomach=="hungry"&&time=="5:00") ? eat = "dinner":eat="a snack";
- document.write("输出结果"+eat);
- </script>
- 6.识别数字
- <script>
- var1=24;
- (isNaN(var1))?document.write("变量var1"+var1+"不是数字"):Document.write("变量var1"+var1+"是数字")
- </script>
- 第四章 控制程序流程
- 1.使用IF –Else语句
- <script>
- month="december"
- date=25
- if(month=="december" && date==25)
- document.write("今天是圣诞节,商店关门")
- else
- document.write("欢迎,您来商店购物")
- </script>
- 2.使用for 循环
- <script>
- for (count=1;count<=10;count++)
- document.write("输出第"+count+"句"+"<br>")
- </script>
- 3.使用while循环
- <script>
- count=1
- while(count<=15){
- document.write("输出第"+count+"句" +"<br>")
- count++}
- </script>
- 4.中断循环
- <script>
- count=1
- while(count<=15){
- count++
- if(count==8)
- break;
- document.write("输出第"+count+"句"+"<br>")}
- </script>
- 5.继续循环
- <script>
- count=1
- while(count<=15){
- count++
- if(count==8)
- continue;
- document.write("输出第"+count+"句"+"<br>")}
- </script>
- 6.使用javascript定时器
- <script>
- function rabbit()
- {document.write("输出语句")
- }
- </script>
- <body onload=window.setTimeout(rabbit(),5000)>
- 7.设置定期间隔
- <script>
- window.setInterval("document.form1.text2.value=document.form1.text1.value",3000)
- </script>
- <form name=form1>
- <input type=text name=text1><br>
- <input type=text name=text2><br>
- </form>
- 8.清除超时和间隔
- <script>
- stop=window.setInterval("document.form1.text2.value=document.form1.text1.value",300)
- </script>
- <form name=form1>
- <input type=text name=text1><br>
- <input type=text name=text2><br>
- <input type=button name=button1 value=" 清除超时和间隔" onclick=clearInterval(stop)>
- </form>
- 第五章 使用函数
- 1.声明函数
- <script>
- function quote()
- { document.write("输出语句")
- }
- </script>
- 2.调用函数
- <script>
- function quote()
- { document.write("输出语句")
- }
- quote()
- </script>
- 3.了解全局变量和局部变量
- 任何不用 var关键字声明的变量都是全局变量,任何在函数外声明的变量都是全局变量
- 4.将参数传送给函数
- <script>
- function f(item)
- {document.write("输出参数"+item+"<br>")
- }
- f("fgdfgd")
- f("参数二")
- </script>
- 5.从函数返回值
- <script>
- function average(var1,var2,var3)
- {ave=(var1+var2+var3)/3;
- document.write("输出结果");
- return ave;
- }
- document.write(average(34,56,78))
- </script>
- 6.通过HTML链接调用函数
- <script>
- function quote(){
- document.write(" 输出字符串")
- }
- </script>
- <a href=javascript:quote()>通过HTML链接调用函数</a>
- <a href=javascript:Document.write("输出字符")> 通过HTML链接调用函数,直接写javascript语句</a>
- 第六章 处理事件
- 1.检查鼠标单击
- <form name=form1>
- <input type=button name=button1 value=hello onclick=document.form1.button1.value='there'>
- </form>
- 2.检测双击
- <form name=form1>
- <input type=button name=button1 value=hello onclick=document.form1.button1.value='你单击了按钮' ondblclick=document.form1.button1.value='你双击了该按钮'>
- </form>
- 3.创建悬停按钮
- <img src=go.gif onmouseover=document.images[0].src='go2.gif' onmouseout= document.images[0].src='go.gif'>
- 4.检测按键
- <form name=form1>
- <input type=text name=text1 value=hello onkeypress="if(window.event.keyCode=='100') document.form1.text1.value='你按了d键'">
- </form>
- 5.设置焦点
- <form name=form1>
- <input type=text name=text1 value=hello
- onfous=document.form1.text1.value='该文本框获得焦点'
- onblur=document.form1.text1.value='该文本框失去焦点'>
- </form>
- 6.检测下拉菜单选择
- <form name=form1>
- <select name=select1 size=4
- onChange=document.form1.text1.value=document.form1.select1.value>
- <option value="北京">北京</option>
- <option value="上海">上海</option>
- <option value="武汉">武汉</option>
- <option value="天津">天津</option>
- <option value="大连">大连</option>
- </select>
- <input tppe=text name=text1 value=hello>
- </form>
- 7.创建网页加载和卸载信息
- <body onload=document.form1.text1.value='页面加载完毕' onunload=alert('再见,欢迎再来')>
- <form name=form1>
- <input type=text name=text1 value="页面正在加载 ……">
- </form>
- 第七章 使用对象
- 1.理解对象\属性和方法
- <body bgcolor="green">
- <script>
- document.write("页面背景颜色是:"+document.bgColor)
- document.write("页面前景颜色是:"+document.fgColor)
- </script>
- 2.使用网页元素对象
- <script>
- </script>
- <form name=form1>
- <textarea name=ta1>dfgfdgfdhfdhdfdfgdf</textarea>
- <input type=button value="选择文本" onclick=document.form1.ta1.select()>
- <input type=button value="显示文本" onclick=document.write(document.form1.ta1.value)>
- </form>
- 3.使用子对象
- <form name=form1>
- <input type=text name=text1 value=hello>
- </form>
- <script>
- document.form1.text1.value="gdfgfd"
- </script>
- <form name=form1>
- <input type=radio name=radio1>男
- <input type=radio name=radio2>女
- </script>
- <script>
- document.form1.radio1.checked=true
- </script>
- 4.使用预定义对象
- <script>
- str1="dgdfgdfgdfhf固定法固定法功夫攻打法"
- document.write(str1+"<br>")
- str2=str1.substr(5)
- document.write(str2+"<br>")
- document.write("输出圆的面积:"+Math.PI*Math.pow(5.0,2))
- </script>
- 5.创建新对象
- <script>
- today=new Date()
- document.write("今天是"+(today.getMonth()+1)+"月"+today.getDate()+"日"+"<br>")
- document.write("现在是:"+today.toLocaleString())
- </script>
- 6.引用当前对象
- <form name=form1>
- <input type=text name=text1 value="dgdgdfgfd" onclick=this.select()>
- </script>
- 7.查看对象属性
- <script>
- for(prop in window)
- {document.write("window."+prop+"="+window[prop]+"<br>");}
- for(prop2 in location)
- {document.write("location."+prop2+"="+location[prop]+"<br>");}
- </script>
- 8.使用Array对象
- <script>
- array=new Array(10)
- array[0]="bark"
- array[1]="apple"
- array[2]="nebula"
- array[3]="cookie"
- array[4]="technology"
- document.write("数组元素个数是"+array.Length+"<br>")
- document.write("用 join将数组合并"+array.join(" ")+"<br>")
- document.write(" 数组排序"+array.sort())
- </script>
- 9.使用 image 对象
- <img src=**.gif alt="图片提示…." border=10>
- <script>
- document.write("图片提示是:"+document.images[0].alt+"<br>")
- document.write("图片边框大小是:"+document.images[0].broder)
- </script>
- 10.预加载图像
- <script>
- freddy=new Image()
- freddy.src=freddy.gif
- </script>
- <body onload=document.images[0].src=freddy.src>
- ,<img src="blank.gif">
- </body>
- 11.改变图像
- <img src=freddy.gif><br>
- <form name=form1>
- <input type=button name=button1 value="改变图像" onclickd=document.images[0].src=dudjp.gif>
- </form>
- 12.使用link和anchor对象
- <a name=anchor1>锚点1<br>
- <a href=http://www.microsoft.com>Microsoft</a><br>
- <a href=http://www.sohu.com>sohu</a><br>
- <a href=http://www.sina.com.cn>sina</a><br>
- <script>
- document.write("本页面共有"+document.links.length+"链接"+"<br>")
- document.write("本页面共有"+document.anchors.length+"锚点"+"<br>")
- document.write("第一个链接协议是"+document.links[0].protocol+"<br>")
- document.write("第一个链接路径是"+document.links[0].pathnamel+"<br>")
- document.write("第一个链接href是"+document.links[0].hrefl+"<br>")
- </script>
- 13.改变链接
- <a href =http://www.microsoft.com>link</a>
- <form name=form1>
- <input type=button name=button1 value="改变链接" onclick=document.links[0].href='http://www.sohu.com'>
- </form>
- 14.使用history对象
- <form name=form1>
- <input type=button name=button1 value="向后返回2页" onclick=window.history.go(-2)>
- </form>
- 第八章 使用窗口
- 1.在浏览器的状态栏上显示文本
- <body onload=window.status="欢迎光临我的站点">
- <a href=http://www.sohu.com>sohu</a>
- </body>
- 2.改变背景色
- <script>
- document.bgColor="orange"
- </script>
- 3.列举背景颜色
- <body bgColor =green>
- <script>
- document.write("当前背景色是:"+document.bgColor)
- </script>
- </body>
- 4.改变文本和链接颜色
- <script>
- document.bgColor="orange"
- document.fgColor="blue"
- document.linkColor="red"
- </script>
- <h2>看看这段文本颜色</h2>
- <a href=http://www.sohu.com>sohu</a>
- </body>
- 5.改变文档标题
- <script>
- name="Mouse"
- document.title="welcome to "+name+"'s House"
- document.write(document.title)
- </script>
- 6.显示修改日期
- <script>
- document.write("本页面最后修改时间是"+document.lastModified)
- </script>
- 7.查看当前文档的URL
- <script>
- document.write("本页面的URL:"+document.URL)
- </script>
- 8.查看引用页
- <script>
- document.write("本页面的引用页是"+document.referrer)
- </script>
- 9.打开新的浏览器窗口
- <script>
- window.open("*.htm","title","width=200,height=400,resizable=yes")
- </script>
- 10.关闭远程窗口
- close.html:
- <script>
- document.write("正文")
- </script>
- <form name=form1>
- <input type=button name=button1va, , , lue="关闭" onclick=window.close()>
- </form>
- open.html
- <script>
- window.open("close.html","romote","width=200,height=400,resizable=yes")
- </script>
- 11.打印窗口
- <script>
- document.write("正文")
- </script>
- <form name=form1>
- <input type=button value=打印 onclick=window.print()>
- </form>
- 12.移动窗口
- <form name=form1>
- 水平方向<input type=text name=x value=20>
- 垂直方向<input type=text name=y value=50>
- <input type=button value="移动窗口到…"onclick=window.moveTo(document.form1.x.value,document.form1.y.value)>
- </form>
- <form name=form1>
- 水平方向<input type=text name=x value=20>
- 垂直方向<input type=text name=y value=50>
- <input type=button value="移动窗口"onclick=window.moveBy(document.form1.x.value,document.form1.y.value)>
- </form>
- 13.改变窗口大小
- <form name=form1>
- 水平方向<input type=text name=x value=200>
- 垂直方向<input type=text name=y value=500>
- <input type=button value="改变窗口大小到….."onclick=window.resizeTo(document.form1.x.value,document.form1.y.value)>
- </form>
- <form name=form1>
- 水平方向<input type=text name=x value=200>
- 垂直方向<input type=text name=y value=500>
- <input type=button value="改变窗口大小"onclick=window.resizeBy(document.form1.x.value,document.form1.y.value)>
- </form>
- 14.用警告对话框通知用户
- <script>
- window.alert("welcome")
- </script>
- 15.用提示对话框接受输入
- <script>
- name=window.prompt("输入姓名","姓名")
- document.write(" 欢迎您:"+name+"来到这里")
- </script>
- 16.用确认对话框使用户做出决定
- <script>
- like=window.confirm("你觉得好吗?")
- if(like==true)
- document.write("谢谢你的夸奖")
- else
- document.write("希望得到你的夸奖")
- </script>
- 第九章 使用字符串
- 1.使用字符串对象
- <script>
- mystring="gdgdfgfddddaaaaaaaaaaaabbbbbbbbbbbbbbbbbvbhg.<br>"
- document.write(mystring)
- document.write(mystring.bold())
- document.write(mystring.toUpperCase())
- </script>
- 2.使用子字符串
- <script>
- str1="fdsf 1111 gfdgfd dfdsf cccc dddd.<br>"
- document.write(str1)
- document.write(str1.substring(0,13)+"<br>")
- document.write(str1.substr (20,11)+"<br>")
- </script>
- 3.连接字符串
- <script>
- str1="may you find"
- str2="peace,happiness and prosperity.<br>"
- document.write(str1+"<br>")
- document.write(str2)
- document.write(str1.concat(str2))
- document.write(str1+=str2)
- </script>
0 0
- 《事半功倍系列 javascript》代码
- 事半功倍系列之javascript
- 事半功倍系列 javascript
- 事半功倍系列 javascript
- 事半功倍系列 javascript
- 事半功倍系列 javascript
- 事半功倍系列 javascript
- 事半功倍系列 javascript
- 事半功倍系列 javascript
- 事半功倍系列 javascript
- 事半功倍系列 javascript
- 事半功倍系列 javascript
- 事半功倍系列 javascript
- 事半功倍系列之javascript
- Ajax-事半功倍系列 javascript
- 事半功倍系列 javascript
- 事半功倍系列 javascript
- 事半功倍系列之javascript(二)
- 【CF 311E】
- leetcode刷题,总结,记录,备忘 290
- Codeforces Round #358 (Div. 2) C. Alyona and the Tree(如果这棵树合法有一个条件:对于树上任意一个点,它的祖先到它的距离小于等于它自己的值)
- Android studio Gradle 基础知识
- JAVA学习代码——增强for循环For each
- 《事半功倍系列 javascript》代码
- Javascript中的css样式常用属性
- poj3983 快算24
- HDU-5813-Elegant Construction-贪心
- android中ToolBar设置setNavigationOnClickListener()方法不起作用
- zoj 1610 Count the Colors(线段树)
- HDU 2602 Bone Collector 收集骨头+最基本的01背包
- 监控系统大全
- (HDU 5831)2016 Multi-University Training Contest 8 Rikka with Parenthesis II(水?)